@layer features {
/* The label floor for drawn widgets (2026-10-07): no SVG label renders under the site's 12px at 375 or 1280.
   A drawing that scales to fit shrinks every unit inside it, so these sizes are set against the size on screen:
   font-size times the drawing's scale. --sx-u and --u are a drawing's units per CSS pixel. systems-explorer.js
   writes --sx-u on the atlas map, and app.js writes --u on the wheel, the flow channel and the loop lab. The atlas
   and Sanctum charts are plotted in their own pixels, so the Sanctum label only needs its size here. */
.sx-map .sx-nodename { font-size: calc(13px * var(--sx-u, 1)); stroke-width: calc(4px * var(--sx-u, 1)); }
.sx-map .sx-empty { font-size: calc(14px * var(--sx-u, 1)); }
.sn-chartlabel { font-size: 12px; fill: #c4c4e6; }
.wheel .wnum { font-size: max(15px, calc(12.5px * var(--u, 0))); }
.flow text { font-size: max(13px, calc(12.5px * var(--u, 0))); }
.lab-chart text { font-size: max(13px, calc(12.5px * var(--u, 0))); }
.lm-loopmark text { font-size: 14px; }
/* On a phone the atlas legend wraps to two lines, where a readout pinned 110px above the stage's foot would sit on
   top of it. Below 720px the readout takes its own line between the map and the legend. */
@media (max-width: 720px) {
  .sx-live { position: static; max-width: none; padding: 4px 16px 0; }
}
}