/* Bundled before theme.css, so a rule restyling a shared component stands under .sl-pres to outrank it; declares no custom property */

/* Root: the tones and the shared shapes */
.sl-pres {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  color: var(--sl-pres-text);
  font: var(--sl-font-body)/var(--sl-line-normal) Arial, system-ui, sans-serif;
}

.sl-pres :is(h1, h2, h3) {
  font-family: inherit;
  font-weight: var(--sl-weight-bold);
}

.sl-pres,
.sl-pres *,
.sl-pres *::before,
.sl-pres *::after {
  box-sizing: border-box;
}

.sl-pres img {
  display: block;
  max-width: 100%;
}

.sl-pres a {
  color: inherit;
  text-decoration: none;
}

.sl-pres button {
  font: inherit;
}

/* The tone an element carries, read by everything drawn in currentColor below it */
.sl-pres [data-sl-tone="primary"],
.sl-pres [data-sl-tone="info"] { color: var(--sl-pres-link-text); }
.sl-pres [data-sl-tone="success"] { color: var(--sl-pres-good-text); }
.sl-pres [data-sl-tone="warning"] { color: var(--sl-pres-warn-text); }
.sl-pres [data-sl-tone="danger"] { color: var(--sl-danger); }
.sl-pres [data-sl-tone="accent"] { color: var(--sl-accent); }
.sl-pres [data-sl-tone="muted"] { color: var(--sl-pres-muted-text); }

/* The glyph standing before a caption, in the brand tone, and the two sizes it comes in */
.sl-pres-cockpit-top .bi,
.sl-pres-panel-head > span > .bi,
.sl-pres-presets > span > .bi,
.sl-pres-note > .bi,
.sl-pres-vars header > .bi {
  margin-right: var(--sl-space-2);
  color: var(--sl-pres-link-text);
}

.sl-pres-core-stack .bi,
.sl-pres-rate > .bi,
.sl-pres-rules .bi {
  color: var(--sl-pres-link-text);
  font-size: var(--sl-font-micro);
}

.sl-pres-result > .bi {
  color: var(--sl-pres-link-text);
  font-size: var(--sl-font-small);
}

/* The monospace micro caption: one role for every small figure beside a value; its placement stays with each component */
.sl-pres-mono,
.sl-pres-page-content > small,
.sl-pres-router > span,
.sl-pres-case > strong,
.sl-pres-pulse-body > time,
.sl-pres-when > time,
.sl-pres-when > small,
.sl-pres-evt > time,
.sl-pres-since > span,
.sl-pres-voice-person small,
.sl-pres-pipe > div > span,
.sl-pres-flow-core small {
  display: block;
  font-family: var(--sl-face-mono);
  font-size: var(--sl-font-micro);
  color: var(--sl-pres-muted-text);
}

.sl-pres-mono {
  display: inline;
}

/* The overline: the same caption in capitals, standing over a panel or under a value */
.sl-pres-over,
.sl-pres-stat > span,
.sl-pres-ring > div > span,
.sl-pres-tech-card span {
  display: block;
  font-family: var(--sl-face-mono);
  font-size: var(--sl-font-micro);
  letter-spacing: var(--sl-track-wide);
  text-transform: uppercase;
  color: var(--sl-pres-muted-text);
}

/* A framed card inside a section body: the illustrated scenes, the runtime cards, the guard console */
.sl-pres-card {
  position: relative;
  min-width: 0;
  border: 1px solid var(--sl-pres-border);
  border-radius: var(--sl-radius-2);
  background: var(--sl-pres-panel-bg);
  padding: var(--sl-space-5);
}

.sl-pres-card > h3 {
  margin: 0 0 var(--sl-space-4);
  font-size: var(--sl-font-body);
  font-weight: var(--sl-weight-semibold);
  color: var(--sl-pres-text);
}

.sl-pres-card > h3 > .bi {
  margin-right: var(--sl-space-3);
  color: var(--sl-pres-link-text);
  font-size: var(--sl-size-icon-xs);
}

/* An illustrated scene: a framed ground with the faint grid every drawing of the page stands on */
.sl-pres-scene {
  position: relative;
  isolation: isolate;
  min-height: var(--sl-pres-height);
  overflow: hidden;
  border: 1px solid var(--sl-pres-border);
  border-radius: var(--sl-radius-3);
  background-color: var(--sl-pres-panel-bg);
  background-image: var(--sl-pres-bg);
  background-size: 24px 24px;
}

/* A node standing inside a scene: one width for the module map, the block router, the PDO bus and the cache ring */
.sl-pres-node {
  position: absolute;
  z-index: var(--sl-z-overlay);
  width: var(--sl-pres-width);
  border: 1px solid var(--sl-pres-frame-border);
  border-radius: var(--sl-radius-2);
  background: var(--sl-pres-panel-bg);
  padding: var(--sl-space-3) var(--sl-space-4);
  box-shadow: var(--sl-shadow-raised);
  color: var(--sl-pres-muted-text);
  text-align: left;
  transition:
    border-color var(--sl-time-slow) var(--sl-ease-in-out),
    background-color var(--sl-time-slow) var(--sl-ease-in-out),
    transform var(--sl-time-slow) var(--sl-ease-in-out);
}

.sl-pres-node > .bi {
  float: left;
  margin-right: var(--sl-space-3);
  color: var(--sl-pres-link-text);
  font-size: var(--sl-font-body);
}

.sl-pres-node > span {
  float: right;
  font-family: var(--sl-face-mono);
  font-size: var(--sl-font-micro);
}

.sl-pres-node > b {
  display: block;
  clear: both;
  margin-top: var(--sl-space-2);
  font-size: var(--sl-font-small);
  color: var(--sl-pres-text);
}

.sl-pres-node > small {
  display: flex;
  justify-content: space-between;
  gap: var(--sl-space-2);
  margin-top: var(--sl-space-2);
  font-family: var(--sl-face-mono);
  font-size: var(--sl-font-micro);
}

.sl-pres-node.sl-is-on,
.sl-pres-node:hover {
  border-color: var(--sl-primary);
  background: var(--sl-pres-inset-bg);
  transform: translateY(-2px);
}

.sl-pres-node.sl-is-on > b {
  color: var(--sl-pres-text);
}

.sl-pres-node.sl-is-on > .bi,
.sl-pres-node.sl-is-on > span {
  color: var(--sl-pres-good-text);
}

.sl-pres-node.sl-is-off {
  opacity: var(--sl-fade-disabled);
}

/* A wire drawn in an SVG over a scene, running its dashes towards the centre */
#content .sl-pres-wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* The running dashes of the block scene repaint every frame on a layer of their own, not the scene under them; the map keeps its wires in the scene, as its core above them would raster half a pixel off */
.sl-pres-blocks-stage > .sl-pres-wires {
  will-change: transform;
}

.sl-pres-wires path {
  fill: none;
  stroke: var(--sl-pres-frame-border);
  stroke-width: 1;
  stroke-dasharray: 5 7;
  animation: sl-pres-dash calc(var(--sl-pres-dur) * 4) linear infinite;
}

.sl-pres-wires path.sl-is-on {
  stroke: var(--sl-primary);
}

/* The wire of the block card under the pointer, drawn solid and thicker */
.sl-pres-wires path.sl-is-hot {
  stroke: var(--sl-pres-link-text);
  stroke-width: 2;
  stroke-dasharray: none;
}

@keyframes sl-pres-dash {
  to { stroke-dashoffset: -180; }
}

/* A live lamp: a small disc in its tone, with the tone's own halo */
.sl-pres-dot {
  display: inline-block;
  width: var(--sl-space-3);
  height: var(--sl-space-3);
  border-radius: var(--sl-radius-circle);
  background: currentColor;
  box-shadow: 0 0 0 var(--sl-space-1) color-mix(in srgb, currentColor var(--sl-chip-mix), transparent);
}

.sl-pres-dot.sl-is-live {
  animation: sl-pres-breathe calc(var(--sl-pres-dur) / 4) var(--sl-ease-in-out) infinite alternate;
}

@keyframes sl-pres-breathe {
  to { opacity: var(--sl-fade-disabled); transform: scale(0.72); }
}

/* One turn: the orbit of the module map, the radar and the shield of the guard, the ring of the flow core, the plate of the cockpit */
@keyframes sl-pres-spin {
  to { transform: rotate(360deg); }
}

/* A small monospace pill: a version, a status, a count */
.sl-pres-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sl-space-2);
  border: 1px solid var(--sl-pres-border);
  border-radius: var(--sl-radius-pill);
  padding: var(--sl-space-1) var(--sl-space-3);
  background: var(--sl-pres-inset-bg);
  font-family: var(--sl-face-mono);
  font-size: var(--sl-font-micro);
  letter-spacing: var(--sl-track-wide);
  white-space: nowrap;
}

/* The labels the design sets in capitals: the language files hold them in sentence case, the capitals come from here */
.sl-pres-allow > span,
.sl-pres-badge,
.sl-pres-bcard > span,
.sl-pres-blocks-panel .sl-pres-panel-head > b,
.sl-pres-console-head > span,
.sl-pres-core-flow > span,
.sl-pres-deny > span,
.sl-pres-door > span,
.sl-pres-evt > span,
.sl-pres-flow-core > div > b,
.sl-pres-guard-console .sl-pres-log > div > em,
.sl-pres-guard-console .sl-pres-row > b,
.sl-pres-net > span,
.sl-pres-node > span,
.sl-pres-note-row > b,
.sl-pres-panel-head > span,
.sl-pres-pdo-head > b,
.sl-pres-pdo-head > em,
.sl-pres-pipe > div > span,
.sl-pres-pulse-head > div > span,
.sl-pres-quarantine > div > span,
.sl-pres-router > b,
.sl-pres-shield > small,
.sl-pres-slot,
.sl-pres-track > span,
.sl-pres-vitals-list > span > b[data-sl-tone],
.sl-pres-zone {
  text-transform: uppercase;
}

/* A segmented control: the chart period, the chart view. Static in CSS, the plugin moves aria-pressed */
.sl-pres-segment {
  display: inline-flex;
  gap: var(--sl-space-1);
  padding: var(--sl-space-2);
  border: 1px solid var(--sl-pres-border);
  border-radius: var(--sl-radius-2);
  background: var(--sl-pres-inset-bg);
}

.sl-pres-segment button {
  display: inline-flex;
  align-items: center;
  gap: var(--sl-space-2);
  border: 0;
  border-radius: var(--sl-radius-1);
  padding: var(--sl-space-3) var(--sl-space-5);
  background: transparent;
  color: var(--sl-pres-muted-text);
  font-size: var(--sl-font-small);
  cursor: pointer;
}

.sl-pres-segment button[aria-pressed="true"],
.sl-pres-segment button[aria-selected="true"] {
  background: var(--sl-pres-ground-bg);
  color: var(--sl-pres-link-text);
  box-shadow: var(--sl-shadow-xs);
}

/* Every focusable control of the page draws the theme's one ring */
.sl-pres :is(a, button, input, [tabindex]):focus-visible {
  outline: var(--sl-ring-width) solid var(--sl-primary);
  outline-offset: var(--sl-ring-gap);
}

/* Stat: fragments/presentation-stat.html, its foot bar drawn only when the fragment carries a share */
.sl-pres-stat {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--sl-pres-border);
  border-radius: var(--sl-radius-2);
  background: var(--sl-pres-panel-bg);
  padding: var(--sl-space-4) var(--sl-space-5);
}



.sl-pres-stat > b {
  display: block;
  margin-top: var(--sl-space-2);
  font-size: var(--sl-font-h2);
  line-height: var(--sl-line-tight);
  letter-spacing: var(--sl-track-tight);
  color: var(--sl-pres-text);
  white-space: nowrap;
}

.sl-pres-stat > b > small {
  font-size: var(--sl-font-small);
  font-weight: var(--sl-weight-medium);
  letter-spacing: 0;
  color: var(--sl-pres-muted-text);
}

.sl-pres-stat > em {
  display: block;
  margin-top: var(--sl-space-1);
  font-family: var(--sl-face-mono);
  font-size: var(--sl-font-micro);
  font-style: normal;
  color: var(--sl-pres-muted-text);
}

.sl-pres-stat[data-sl-tone] > b {
  color: currentColor;
}

.sl-pres-stat > i {
  position: absolute;
  right: var(--sl-space-3);
  bottom: var(--sl-space-3);
  left: var(--sl-space-3);
  height: var(--sl-space-2);
  border-radius: var(--sl-radius-pill);
  background: var(--sl-pres-inset-bg);
}

/* Nothing clips the track, so the fill glows in the tone it starts with, as every bar does */
.sl-pres-stat > i::after {
  content: "";
  display: block;
  width: var(--sl-d-part, 0%);
  height: 100%;
  border-radius: var(--sl-radius-pill);
  background: linear-gradient(90deg, var(--sl-pres-link-text), var(--sl-pres-good-text));
  box-shadow: 0 0 var(--sl-space-4) color-mix(in srgb, var(--sl-pres-link-text) var(--sl-gauge-mix), transparent);
  transition: width var(--sl-time-slow) var(--sl-ease-out);
}

.sl-pres-stat:has(> i) {
  padding-bottom: var(--sl-space-8);
}

/* A sweeping hairline under a stat, lit under the pointer */
.sl-pres-stat::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--sl-primary), transparent);
  transform: translateX(-100%);
  transition: transform var(--sl-time-slow) var(--sl-ease-in-out);
}

.sl-pres-stat:hover::after {
  transform: translateX(100%);
}

/* Ring: fragments/presentation-ring.html, the theme's one ring at the gauge sizes */
.sl-pres .sl-pres-ring {
  flex-basis: var(--sl-gauge-width);
  width: var(--sl-gauge-width);
  height: var(--sl-gauge-height);
  margin: 0 auto;
}

.sl-pres .sl-pres-ring-sm {
  flex-basis: var(--sl-gauge-min-width);
  width: var(--sl-gauge-min-width);
  height: var(--sl-gauge-min-height);
}

.sl-pres-ring > div {
  position: relative;
  z-index: var(--sl-z-raised);
  text-align: center;
  pointer-events: none;
}

.sl-pres-ring > div > b {
  display: block;
  font-size: var(--sl-font-h1);
  line-height: var(--sl-line-tight);
  letter-spacing: var(--sl-track-tight);
  color: var(--sl-pres-text);
}

.sl-pres-ring-sm > div > b {
  font-size: var(--sl-font-small);
  letter-spacing: 0;
}

.sl-pres-ring > div > b > small {
  font-size: var(--sl-font-small);
  font-weight: var(--sl-weight-normal);
  letter-spacing: 0;
  color: var(--sl-pres-muted-text);
}

.sl-pres-ring > div > span {
  margin-top: var(--sl-space-2);
}

/* Head: fragments/presentation-head.html */
.sl-pres-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sl-space-5);
  padding: var(--sl-space-5) var(--sl-space-6);
  border-bottom: 1px solid var(--sl-pres-border);
}

.sl-pres-num {
  display: inline-flex;
  align-items: center;
  height: var(--sl-size-control);
  border: 1px solid var(--sl-pres-frame-border);
  border-radius: var(--sl-radius-2);
  padding: 0 var(--sl-space-3);
  font-family: var(--sl-face-mono);
  font-size: var(--sl-font-small);
  color: var(--sl-pres-link-text);
}

.sl-pres-icon {
  display: inline-flex;
  flex: 0 0 var(--sl-size-control);
  align-items: center;
  justify-content: center;
  width: var(--sl-size-control);
  height: var(--sl-size-control);
  border: 1px solid var(--sl-pres-frame-border);
  border-radius: var(--sl-radius-2);
  background: var(--sl-pres-inset-bg);
  color: var(--sl-pres-link-text);
  font-size: var(--sl-size-icon-sm);
  line-height: 1;
}

.sl-pres-head > h2 {
  margin: 0;
  font-size: var(--sl-font-h2);
  color: var(--sl-pres-text);
}

.sl-pres-head > p {
  min-width: 0;
  margin: 0 0 0 auto;
  font-size: var(--sl-font-small);
  color: var(--sl-pres-muted-text);
}

.sl-pres-head > .sl-pres-pill {
  margin-left: auto;
}

.sl-pres-head > p + .sl-pres-pill {
  margin-left: 0;
}

/* The switch of a section that plays its scene with a feature on or off: the scene alone changes, never the site */
.sl-pres-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sl-space-3);
  font-size: var(--sl-font-small);
  color: var(--sl-pres-muted-text);
}

/* Section frame: the head and the body of every section */
.sl-pres-stage {
  display: grid;
  gap: var(--sl-space-6);
  margin-top: var(--sl-space-6);
}

.sl-pres-section {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--sl-pres-border);
  border-radius: var(--sl-radius-3);
  background: var(--sl-pres-panel-bg);
  scroll-margin-top: calc(var(--sl-d-rail, 0px) + var(--sl-space-4));
}

.sl-pres-body {
  padding: var(--sl-space-6);
}

/* A section rises into place as it enters the window, by the scroll timeline alone: no script, and no motion at all where the reader asked for none */
@supports (animation-timeline: view()) {
  .sl-pres-section {
    animation: sl-pres-reveal both;
    animation-timeline: view();
    animation-range: entry 0 entry 30%;
  }
}

@keyframes sl-pres-reveal {
  from { opacity: var(--sl-fade-disabled); transform: translateY(var(--sl-space-4)); }
  to { opacity: 1; transform: none; }
}

/* Hero: partials/presentation-hero.html */
.sl-pres-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--sl-pres-border);
  border-radius: var(--sl-radius-3);
  background-color: var(--sl-pres-ground-bg);
  background-image: var(--sl-pres-bg);
  background-size: 24px 24px;
  padding: var(--sl-space-7) var(--sl-space-7) var(--sl-space-6);
  box-shadow: var(--sl-shadow-raised);
}


.sl-pres-hero > :not(.sl-pres-ticker) {
  position: relative;
}

.sl-pres-facts > .sl-pres-stat {
  display: flex;
  flex-direction: column;
  gap: var(--sl-space-2);
}

.sl-pres-facts > .sl-pres-stat > b {
  order: -1;
}

.sl-pres .sl-pres-ring:has(path) .sl-knob-svg {
  transform: none;
}

.sl-pres .sl-pres-ring .sl-knob-svg {
  overflow: visible;
}

/* The arc and, on the cockpit, the figure in its centre read one tone, so the number and its ring can never disagree */
.sl-pres .sl-pres-ring .sl-knob-val,
.sl-pres .sl-pres-gauges > .sl-pres-ring > div > b,
.sl-pres .sl-pres-dials > .sl-pres-ring > div > b {
  color: var(--sl-pres-link-text);
}

/* A filter inside the svg measures in units of its viewBox, which a ring draws three to four times larger: the step two lower blurs about as wide as the arc is thick, as a bar's glow does */
.sl-pres .sl-pres-ring .sl-knob-val {
  stroke: currentColor;
  filter: drop-shadow(0 0 var(--sl-space-2) color-mix(in srgb, currentColor var(--sl-gauge-mix), transparent));
  animation: sl-pres-arc var(--sl-knob-dur) var(--sl-alert-ease) both;
}

/* An arc fills to its share from zero on the spring of the panel, once, when its part first stands on screen: off screen it waits paused */
@keyframes sl-pres-arc {
  from { stroke-dasharray: 0 100; }
}

.sl-pres .sl-pres-ring path.sl-knob-bg {
  stroke: var(--sl-pres-border);
}

.sl-pres .sl-knob-ok .sl-knob-val,
.sl-pres .sl-pres-gauges > .sl-knob-ok > div > b,
.sl-pres .sl-pres-dials > .sl-knob-ok > div > b {
  color: var(--sl-pres-good-text);
}

.sl-pres .sl-knob-warn .sl-knob-val,
.sl-pres .sl-pres-gauges > .sl-knob-warn > div > b,
.sl-pres .sl-pres-dials > .sl-knob-warn > div > b {
  color: var(--sl-pres-warn-text);
}

.sl-pres .sl-knob-danger .sl-knob-val,
.sl-pres .sl-pres-gauges > .sl-knob-danger > div > b,
.sl-pres .sl-pres-dials > .sl-knob-danger > div > b {
  color: var(--sl-danger);
}

/* An open arc ends in the air, so its track and its value both take round ends; the butt end of the theme is for a closed ring */
.sl-pres .sl-pres-ring path:is(.sl-knob-bg, .sl-knob-val) {
  stroke-linecap: round;
}

.sl-pres-ring path:not([class]) {
  fill: none;
  stroke: var(--sl-pres-muted-text);
  stroke-width: calc(var(--sl-space-1) / 10);
}

.sl-pres .sl-pres-gauges > .sl-pres-ring,
.sl-pres .sl-pres-dials > .sl-pres-ring {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
}

.sl-pres-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: var(--sl-space-8);
  align-items: stretch;
}

.sl-pres-copy {
  min-width: 0;
}

/* The cockpit: the gauges of this very request above the headline, swept by one scanning line */
.sl-pres-cockpit {
  position: relative;
  margin-bottom: var(--sl-space-6);
  overflow: hidden;
  border: 1px solid var(--sl-pres-border);
  border-radius: var(--sl-radius-3);
  background: linear-gradient(180deg, var(--sl-pres-inset-bg), var(--sl-pres-panel-bg));
  padding: var(--sl-space-6);
}

/* The scan of the cockpit, the panel's own: a line of light goes down it now and then; a thin line keeps its offset */
.sl-pres-cockpit::after {
  content: "";
  position: absolute;
  top: 0;
  right: var(--sl-space-6);
  left: var(--sl-space-6);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--sl-primary), transparent);
  box-shadow: 0 0 var(--sl-space-4) var(--sl-space-1) var(--sl-tint-strong), 0 0 var(--sl-space-8) var(--sl-space-4) var(--sl-tint);
  opacity: 0;
  animation: sl-cockpit-scan calc(var(--sl-alert-dur) * 5) var(--sl-ease-in-out) infinite;
  pointer-events: none;
}

@keyframes sl-cockpit-scan {
  0% {
    top: 0;
    opacity: 0;
  }

  12% {
    opacity: var(--sl-fade-disabled);
  }

  52% {
    top: 100%;
    opacity: var(--sl-fade-disabled);
  }

  62%,
  100% {
    top: 100%;
    opacity: 0;
  }
}

/* A block that stands still gets the box the light round its frame is drawn in */
.sl-pres-metric,
.sl-pres-chart,
.sl-pres-vitals,
.sl-pres-core,
.sl-pres-bcard,
.sl-pres-blocks-panel,
.sl-pres-pane,
.sl-pres-console,
.sl-pres-tree,
.sl-pres-rings,
.sl-pres-focus {
  position: relative;
}

.sl-pres-scan {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(transparent, var(--sl-primary), transparent);
  box-shadow: var(--sl-pres-shadow);
  opacity: var(--sl-fade-muted);
  animation: sl-pres-scan var(--sl-pres-dur) linear infinite;
  pointer-events: none;
}

@keyframes sl-pres-scan {
  from { left: -1%; }
  to { left: 101%; }
}

.sl-pres-cockpit-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sl-space-4);
  font-family: var(--sl-face-mono);
  font-size: var(--sl-font-micro);
  letter-spacing: var(--sl-track-wide);
  text-transform: uppercase;
  color: var(--sl-pres-muted-text);
}

.sl-pres-cockpit-top .sl-pres-dot {
  margin-right: var(--sl-space-2);
}

/* The row of the cockpit, as the panel lays it: the lamp has a column of its own diameter, the four rings share what is left */
.sl-pres-gauges {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) calc(var(--sl-gauge-width) * 1.15) repeat(2, minmax(0, 1fr));
  gap: var(--sl-space-8);
  align-items: center;
  margin: var(--sl-space-7) 0 var(--sl-space-3);
}

/* The strip under the rings, the twin of the panel's: the figures of this request the rings do not show, each a plain number */
.sl-pres-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sl-space-3) var(--sl-space-8);
  margin: var(--sl-space-6) 0 0;
  border-top: 1px solid var(--sl-pres-border);
  padding: var(--sl-space-5) 0 0;
  list-style: none;
  font-family: var(--sl-face-mono);
  font-size: var(--sl-font-small);
  color: var(--sl-pres-muted-text);
}

.sl-pres-strip > li {
  display: flex;
  align-items: baseline;
  gap: var(--sl-space-2);
}

.sl-pres-strip .bi {
  align-self: center;
  margin-right: var(--sl-space-1);
  color: var(--sl-pres-link-text);
}

.sl-pres-strip b {
  font-size: var(--sl-font-h3);
  color: var(--sl-pres-text);
}

.sl-pres-strip span {
  font-size: var(--sl-font-micro);
  text-transform: uppercase;
}

/* The lamp of the cockpit, the twin of the panel's: a disc of glass a step larger than a ring with a comet round it, a halo in its tone and three rows, every check passed */
.sl-cockpit-plate {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
  justify-items: center;
  row-gap: var(--sl-space-1);
  box-sizing: border-box;
  width: calc(var(--sl-gauge-width) * 1.15);
  aspect-ratio: 1;
  justify-self: center;
  border-radius: var(--sl-radius-circle);
  padding: var(--sl-space-7);
  color: var(--sl-knob-tone);
  filter: var(--sl-gauge-shadow) drop-shadow(0 0 var(--sl-space-4) color-mix(in srgb, currentColor var(--sl-gauge-mix), transparent));
}

/* The comet: one conic ring outside the disc turning whole, its tail from the track into the tone; a ring draws no circle line, which Firefox seams */
.sl-cockpit-plate::before {
  content: "";
  position: absolute;
  inset: calc(var(--sl-space-3) * -1);
  border-radius: var(--sl-radius-circle);
  background: conic-gradient(var(--sl-pres-border) 0 35%, currentColor 99.6%, var(--sl-pres-border) 0);
  mask: radial-gradient(circle closest-side, transparent calc(100% - var(--sl-space-2)), var(--sl-text) calc(100% - var(--sl-space-2) + 1px));
  pointer-events: none;
  animation: sl-pres-spin calc(var(--sl-alert-dur) * 3) linear infinite;
}

/* The glass is a layer of its own under the rows: the rows read against the middle of the disc, never against its shaded rim or its line */
.sl-cockpit-glass {
  position: absolute;
  inset: 0;
  border-radius: var(--sl-radius-circle);
  background:
    radial-gradient(circle closest-side, transparent calc(100% - 1px), var(--sl-pres-border) calc(100% - 1px)),
    var(--sl-gauge-bg);
  pointer-events: none;
}

/* The lamp reads the palette of the presentation as its rings do: its tone is the colour of an ok ring, its track and line the track of an arc */
.sl-pres .sl-cockpit-plate.sl-knob-ok {
  color: var(--sl-pres-good-text);
}

.sl-cockpit-plate > :not(.sl-cockpit-glass) {
  position: relative;
}

.sl-cockpit-head {
  display: flex;
  align-items: baseline;
  align-self: end;
  gap: var(--sl-space-1);
  font-size: var(--sl-font-h1);
  font-weight: var(--sl-weight-bold);
  line-height: var(--sl-line-tight);
  letter-spacing: var(--sl-track-tight);
  font-variant-numeric: tabular-nums;
}

/* The small words of the lamp are the muted words of the presentation, as the captions of its rings */
.sl-cockpit-head > small,
.sl-cockpit-mood {
  font-family: var(--sl-face-mono);
  font-size: var(--sl-font-micro);
  font-weight: var(--sl-weight-normal);
  letter-spacing: var(--sl-track-wide);
  text-transform: uppercase;
  color: var(--sl-pres-muted-text);
}

/* The lamp mark is the one-colour theme mark in the state tone, so the brand in colour stays with the header logo */
.sl-cockpit-mark {
  display: block;
  align-self: center;
  width: var(--sl-size-icon-md);
  aspect-ratio: 1;
  margin-inline-end: var(--sl-space-2);
  background: currentColor;
  mask: url(../../images/logos/slaed-logo-mark-solid-black.svg) center / contain no-repeat;
}

.sl-cockpit-bars {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: calc(var(--sl-gauge-width) * 0.23);
}

/* A bar for each check of the panel lamp, the scan running over them as it does there */
.sl-cockpit-bars > i {
  width: var(--sl-space-1);
  height: var(--sl-space-4);
  border-radius: var(--sl-radius-pill);
  background: currentColor;
  opacity: var(--sl-fade-muted);
  animation: sl-cockpit-check calc(var(--sl-alert-dur) * 2.4) var(--sl-ease-in-out) calc(var(--sl-d-i, 0) * var(--sl-alert-dur) * 0.12) infinite;
}

/* The word of the state is the one of the line above; a long one breaks into two centred lines */
.sl-cockpit-mood {
  align-self: start;
  max-width: 100%;
  line-height: var(--sl-line-tight);
  text-align: center;
}

/* The scan over the bars of the checks: a bar rises as the wave passes it and settles back */
@keyframes sl-cockpit-check {
  0%,
  24%,
  100% {
    transform: scaleY(1);
  }

  8% {
    transform: scaleY(2);
    opacity: 1;
  }
}

/* The figure in the dial centre, the caption in the mouth of the arc, so the caption never crosses the scale */
.sl-pres-gauges > .sl-pres-ring > div,
.sl-pres-dials > .sl-pres-ring > div {
  position: static;
  width: 100%;
  padding: 0 var(--sl-space-5);
}

.sl-pres-gauges > .sl-pres-ring > div > b,
.sl-pres-dials > .sl-pres-ring > div > b {
  position: relative;
  z-index: var(--sl-z-raised);
  font-size: var(--sl-font-hero);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: baseline;
  column-gap: var(--sl-space-1);
}

/* An empty first column as wide as the unit keeps the digits, not the digits with their unit, on the dial centre */
.sl-pres-gauges > .sl-pres-ring > div > b::before,
.sl-pres-dials > .sl-pres-ring > div > b::before {
  content: "";
}

.sl-pres-gauges > .sl-pres-ring > div > b > small,
.sl-pres-dials > .sl-pres-ring > div > b > small {
  justify-self: start;
}

.sl-pres-gauges > .sl-pres-ring > div > span,
.sl-pres-dials > .sl-pres-ring > div > span {
  position: absolute;
  inset-inline: 0;
  bottom: var(--sl-space-2);
  z-index: var(--sl-z-raised);
  margin: 0;
  letter-spacing: 0;
}

.sl-pres-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sl-space-4);
  font-size: var(--sl-font-small);
  letter-spacing: var(--sl-track-wide);
  text-transform: uppercase;
  color: var(--sl-pres-link-text);
}

.sl-pres-eyebrow::before {
  content: "";
  width: var(--sl-space-8);
  height: 1px;
  background: var(--sl-primary);
}

.sl-pres-copy > h1 {
  max-width: calc(var(--sl-view-max-width) + var(--sl-space-10));
  margin: var(--sl-space-5) 0;
  font-size: var(--sl-font-hero);
  font-weight: var(--sl-weight-bold);
  line-height: var(--sl-line-tight);
  letter-spacing: var(--sl-track-tight);
  color: var(--sl-pres-text);
}

.sl-pres-copy > h1 > span {
  color: var(--sl-pres-link-text);
}

.sl-pres-lead {
  margin: 0;
  font-size: var(--sl-font-h4);
  line-height: var(--sl-line-loose);
  color: var(--sl-pres-muted-text);
}

/* The control / runtime panel: a window with a menu rail and a view, the live figures of this request inside it */
.sl-pres-core {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--sl-pres-frame-border);
  border-radius: var(--sl-radius-3);
  background: var(--sl-pres-ground-bg);
  box-shadow: var(--sl-shadow-float);
}

.sl-pres-core-body {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: 126px minmax(0, 1fr);
}

.sl-pres-core-menu {
  border-right: 1px solid var(--sl-pres-border);
  background: var(--sl-pres-panel-bg);
  padding: var(--sl-space-4) var(--sl-space-3);
}

.sl-pres-core-menu > button {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: var(--sl-space-1) 0;
  border: 0;
  border-radius: var(--sl-radius-1);
  background: none;
  padding: var(--sl-space-2) var(--sl-space-3);
  font-size: var(--sl-font-micro);
  color: var(--sl-pres-muted-text);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--sl-time-base), color var(--sl-time-base), transform var(--sl-time-base);
}

.sl-pres-core-menu > button > .bi {
  width: var(--sl-size-icon-sm);
  margin-right: var(--sl-space-2);
  color: var(--sl-primary-subtle);
  font-size: var(--sl-font-small);
}

.sl-pres-core-menu > button:hover,
.sl-pres-core-menu > button[aria-pressed="true"],
.sl-pres-rail-item:hover {
  background: var(--sl-pres-inset-bg);
  color: var(--sl-pres-text);
}

.sl-pres-core-menu > button:hover {
  transform: translateX(var(--sl-space-1));
}

.sl-pres-core-menu > button[aria-pressed="true"] > .bi {
  color: var(--sl-pres-link-text);
}

.sl-pres-core-menu > button[aria-pressed="true"]::before {
  content: "";
  position: absolute;
  top: var(--sl-space-2);
  bottom: var(--sl-space-2);
  left: 0;
  width: var(--sl-space-1);
  border-radius: var(--sl-radius-1);
  background: var(--sl-primary);
}

.sl-pres-core-view {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--sl-space-4);
}

.sl-pres-core-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sl-space-3);
}

.sl-pres-core-title > b {
  font-size: var(--sl-font-body);
  color: var(--sl-pres-text);
}

.sl-pres-core-title > span {
  font-size: var(--sl-font-micro);
}

.sl-pres-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sl-space-3);
}

.sl-pres-metric {
  border: 1px solid var(--sl-pres-border);
  border-radius: var(--sl-radius-2);
  background: var(--sl-pres-panel-bg);
  padding: var(--sl-space-2) var(--sl-space-3);
}

.sl-pres-metric > b {
  display: block;
  font-size: var(--sl-font-h4);
  color: var(--sl-pres-text);
}

.sl-pres-metric > small,
.sl-pres-mod > small {
  font-size: var(--sl-font-micro);
  color: var(--sl-pres-muted-text);
}

/* The pulse strip of the panel: a framed band with the scan line, the plugin draws the sparkline into it */
.sl-pres-core-pulse {
  position: relative;
  flex: 0 0 var(--sl-plot-min-height);
  height: var(--sl-plot-min-height);
  margin-top: var(--sl-space-3);
  overflow: hidden;
  border: 1px solid var(--sl-pres-border);
  border-radius: var(--sl-radius-2);
  background: linear-gradient(180deg, var(--sl-tint), transparent);
}

.sl-pres-core-pulse::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 1px;
  background: var(--sl-pres-border);
}

.sl-pres-core-pulse canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.sl-pres-core-stack {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sl-space-2);
  margin-top: var(--sl-space-3);
}

.sl-pres-core-stack > span {
  display: grid;
  grid-template-columns: var(--sl-size-icon-xs) auto minmax(0, 1fr);
  gap: var(--sl-space-2);
  align-items: center;
  min-width: 0;
  border: 1px solid var(--sl-pres-border);
  border-radius: var(--sl-radius-1);
  background: var(--sl-pres-panel-bg);
  padding: var(--sl-space-2);
}

.sl-pres-core-stack b {
  font-size: var(--sl-font-micro);
  white-space: nowrap;
}

.sl-pres-core-stack em {
  min-width: 0;
  overflow: hidden;
  font-family: var(--sl-face-mono);
  font-size: var(--sl-font-micro);
  font-style: normal;
  color: var(--sl-pres-muted-text);
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sl-pres-core-stack em.sl-is-ok {
  color: var(--sl-pres-good-text);
}

.sl-pres-core-flow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sl-space-2);
  margin-top: var(--sl-space-2);
  border: 1px solid var(--sl-pres-border);
  border-radius: var(--sl-radius-1);
  background: var(--sl-pres-panel-bg);
  padding: var(--sl-space-2);
  font-family: var(--sl-face-mono);
  font-size: var(--sl-font-micro);
  color: var(--sl-pres-muted-text);
}

.sl-pres-core-flow > span {
  white-space: nowrap;
}

.sl-pres-core-flow > b {
  font-weight: var(--sl-weight-normal);
  color: var(--sl-pres-muted-text);
}

/* The trace of the window: a framed log with the minute, the operation and its result, rewritten by the plugin for the pressed section */
.sl-pres-core .sl-pres-log {
  gap: 0;
  margin-top: var(--sl-space-3);
  overflow: hidden;
  border: 1px solid var(--sl-pres-border);
  border-radius: var(--sl-radius-2);
}

.sl-pres-core .sl-pres-log > div {
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: var(--sl-space-2);
}

.sl-pres-core .sl-pres-log > div:last-child {
  border-bottom: 0;
}

.sl-pres-core .sl-pres-log time {
  color: var(--sl-pres-muted-text);
}

.sl-pres-core .sl-pres-log > div > span {
  color: var(--sl-pres-link-text);
}

/* The six facts under the headline */
.sl-pres-facts {
  position: relative;
  z-index: var(--sl-z-raised);
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--sl-space-3);
  margin-top: var(--sl-space-7);
}

/* The ticker: one line of module names running at a constant rate, held under the pointer */
.sl-pres-ticker {
  margin-top: var(--sl-space-3);
  overflow: hidden;
  border: 1px solid var(--sl-pres-border);
  border-radius: var(--sl-radius-3);
  background: var(--sl-pres-panel-bg);
}

.sl-pres-ticker-track {
  display: flex;
  width: max-content;
  animation: sl-pres-ticker calc(var(--sl-pres-dur) * 8) linear infinite;
}

.sl-pres-ticker:hover .sl-pres-ticker-track {
  animation-play-state: paused;
}

@keyframes sl-pres-ticker {
  to { transform: translateX(-50%); }
}

.sl-pres-ticker-item {
  display: flex;
  align-items: center;
  gap: var(--sl-space-3);
  border-right: 1px solid var(--sl-pres-border);
  padding: var(--sl-space-3) var(--sl-space-6);
  font-family: var(--sl-face-mono);
  font-size: var(--sl-font-small);
  color: var(--sl-pres-muted-text);
  white-space: nowrap;
}

.sl-pres-ticker-item > b {
  color: var(--sl-pres-link-text);
}

.sl-pres-ticker-item > i {
  width: var(--sl-space-2);
  height: var(--sl-space-2);
  border-radius: var(--sl-radius-circle);
  background: var(--sl-primary);
}

/* The technology row: six cards, each in the tone of its stack */
.sl-pres-tech {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--sl-space-3);
  margin-top: var(--sl-space-3);
}

.sl-pres-tech-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sl-space-3);
  min-width: 0;
  min-height: var(--sl-size-icon-xl);
  overflow: hidden;
  border: 1px solid var(--sl-pres-border);
  border-radius: var(--sl-radius-2);
  background: var(--sl-pres-panel-bg);
  padding: var(--sl-space-4) var(--sl-space-5);
  transition: transform var(--sl-time-slow) var(--sl-ease-in-out), border-color var(--sl-time-slow) var(--sl-ease-in-out);
}

.sl-pres-tech-card::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, currentColor, transparent);
  opacity: var(--sl-fade-muted);
  transform: translateX(-65%);
  transition: transform var(--sl-time-slow) var(--sl-ease-in-out), opacity var(--sl-time-slow) var(--sl-ease-in-out);
}

.sl-pres-tech-card:hover {
  border-color: color-mix(in srgb, currentColor var(--sl-tile-mix), var(--sl-pres-border));
  transform: translateY(-3px);
}

.sl-pres-tech-card:hover::before {
  opacity: 1;
  transform: translateX(65%);
}

.sl-pres-tech-card > i {
  display: grid;
  flex: 0 0 var(--sl-size-control);
  place-items: center;
  width: var(--sl-size-control);
  height: var(--sl-size-control);
  border: 1px solid var(--sl-ico-border);
  border-radius: var(--sl-radius-1);
  background: var(--sl-ico-bg);
  font-size: var(--sl-size-icon-xs);
}

.sl-pres-tech-card > div {
  min-width: 0;
}

.sl-pres-tech-card b {
  display: block;
  overflow: hidden;
  font-size: var(--sl-font-h4);
  color: var(--sl-pres-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sl-pres-tech-card span {
  margin-top: var(--sl-space-2);
}

/* Rail: partials/presentation-rail.html; the script writes --sl-d-spy and the dock height --sl-d-rail every section clears */
.sl-pres-rail {
  position: sticky;
  top: 0;
  z-index: var(--sl-z-sticky);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--sl-space-4);
  margin: var(--sl-space-3) 0;
  border: 1px solid var(--sl-pres-border);
  border-radius: var(--sl-radius-3);
  background: color-mix(in srgb, var(--sl-pres-panel-bg) var(--sl-modal-btn-mix), transparent);
  padding: var(--sl-space-3) var(--sl-space-4);
  box-shadow: var(--sl-shadow-raised);
  backdrop-filter: blur(var(--sl-space-4));
}

.sl-pres-rail-head {
  display: flex;
  align-items: center;
  gap: var(--sl-space-3);
  padding-bottom: var(--sl-space-4);
  font-family: var(--sl-face-mono);
  font-size: var(--sl-font-body);
  letter-spacing: var(--sl-track-wide);
  text-transform: uppercase;
  color: var(--sl-pres-muted-text);
  white-space: nowrap;
}

.sl-pres-rail-head > b {
  border: 1px solid var(--sl-pres-border);
  border-radius: var(--sl-radius-pill);
  background: var(--sl-pres-inset-bg);
  padding: var(--sl-space-1) var(--sl-space-3);
  color: var(--sl-pres-link-text);
}

.sl-pres-rail-nav {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding: 0 0 var(--sl-space-4);
  overflow-x: auto;
  overflow-anchor: none;
  scrollbar-width: none;
}

/* The rail scrolls smoothly only where motion is welcome, as the page does */
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-sl-still]) .sl-pres-rail-nav {
    scroll-behavior: smooth;
  }
}

.sl-pres-rail-nav::-webkit-scrollbar {
  display: none;
}

/* The track under the labels, and the part already walked drawn over it up to the current pill */
.sl-pres-rail-nav::before,
.sl-pres-rail-nav::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: var(--sl-space-1);
  border-radius: var(--sl-radius-pill);
  background: var(--sl-pres-border);
  pointer-events: none;
}

.sl-pres-rail-nav::after {
  width: var(--sl-d-spy, 0px);
  background: linear-gradient(90deg, var(--sl-primary), var(--sl-pres-link-text));
  transition: width var(--sl-time-fast) linear;
}

.sl-pres-rail-item {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: auto auto auto;
  align-items: center;
  gap: var(--sl-space-2);
  border-radius: var(--sl-radius-2);
  padding: var(--sl-space-3) var(--sl-space-2);
  color: var(--sl-pres-muted-text);
  white-space: nowrap;
  transition: color var(--sl-time-base) var(--sl-ease-out), background-color var(--sl-time-base) var(--sl-ease-out);
}

.sl-pres-rail-item > b {
  font-size: var(--sl-font-body);
  font-weight: var(--sl-weight-medium);
  text-transform: uppercase;
}

.sl-pres-rail-item > em {
  display: none;
  font-family: var(--sl-face-mono);
  font-size: var(--sl-font-micro);
  font-style: normal;
}

.sl-pres-rail-node {
  width: var(--sl-space-3);
  height: var(--sl-space-3);
  border: 1px solid var(--sl-pres-frame-border);
  border-radius: var(--sl-radius-circle);
  background: var(--sl-pres-panel-bg);
  transition: background-color var(--sl-time-base) var(--sl-ease-out), border-color var(--sl-time-base) var(--sl-ease-out);
}

.sl-pres-rail-item[data-sl-spy-done="1"] .sl-pres-rail-node {
  border-color: var(--sl-primary);
  background: var(--sl-primary-subtle);
}

.sl-pres-rail-item[aria-current="true"] {
  background: var(--sl-tint);
  color: var(--sl-pres-link-text);
}

.sl-pres-rail-item[aria-current="true"] > b {
  font-weight: var(--sl-weight-semibold);
}

.sl-pres-rail-item[aria-current="true"] .sl-pres-rail-node {
  width: var(--sl-space-4);
  height: var(--sl-space-4);
  border-color: var(--sl-pres-link-text);
  background: var(--sl-primary);
  box-shadow: var(--sl-pres-shadow);
}

/* Rhythm: partials/presentation-rhythm.html, the chart and the vitals card */
.sl-pres-rhythm {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sl-space-6);
  align-items: stretch;
}

.sl-pres-chart {
  grid-column: span 3;
}

.sl-pres-chart,
.sl-pres-vitals {
  min-width: 0;
  border: 1px solid var(--sl-pres-border);
  border-radius: var(--sl-radius-2);
  background: var(--sl-pres-panel-bg);
  padding: var(--sl-space-6);
}

.sl-pres-chart-meta,
.sl-pres-chart-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sl-space-5);
}

.sl-pres-chart-meta strong {
  font-size: var(--sl-font-hero);
  line-height: var(--sl-line-tight);
  letter-spacing: var(--sl-track-tight);
  color: var(--sl-pres-text);
}

.sl-pres-chart-meta span {
  display: block;
  margin-top: var(--sl-space-3);
  font-size: var(--sl-font-small);
  color: var(--sl-pres-muted-text);
}

.sl-pres-chart-meta b {
  margin-left: var(--sl-space-3);
  color: var(--sl-pres-good-text);
}

/* The plot: the plugin draws the series into the canvas, the tooltip follows the pointer over it */
.sl-pres-plot {
  position: relative;
  height: var(--sl-plot-height);
  margin-top: var(--sl-space-6);
}

.sl-pres-plot canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.sl-pres-tip {
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid var(--sl-pres-border);
  border-radius: var(--sl-radius-1);
  background: var(--sl-pres-ground-bg);
  padding: var(--sl-space-2) var(--sl-space-4);
  box-shadow: var(--sl-shadow-float);
  color: var(--sl-pres-text);
  font-size: var(--sl-font-small);
  white-space: nowrap;
  opacity: 0;
  transition: opacity var(--sl-time-fast) var(--sl-ease-out);
  pointer-events: none;
}

.sl-pres-plot:hover .sl-pres-tip:not([hidden]) {
  opacity: 1;
}

.sl-pres-chart-foot {
  margin-top: var(--sl-space-5);
  border-top: 1px solid var(--sl-pres-border);
  padding-top: var(--sl-space-5);
}

.sl-pres-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sl-space-6);
  font-size: var(--sl-font-small);
  color: var(--sl-pres-muted-text);
}

.sl-pres-legend > span {
  display: inline-flex;
  align-items: center;
  gap: var(--sl-space-3);
}

.sl-pres-legend i {
  width: var(--sl-space-3);
  height: var(--sl-space-3);
  border-radius: var(--sl-radius-circle);
  background: var(--sl-primary);
}

.sl-pres-legend > span:nth-child(2) i {
  background: var(--sl-accent);
}

.sl-pres-legend > span:nth-child(3) i {
  background: var(--sl-pres-good-text);
}

/* The vitals card: its ring carries two thinner inner arcs in the tones of the chart's bands */
.sl-pres-vitals {
  background: linear-gradient(145deg, var(--sl-tint), var(--sl-pres-panel-bg));
  text-align: center;
}

.sl-pres-vitals > .sl-pres-ring {
  width: calc(var(--sl-gauge-width) + var(--sl-space-11));
  height: calc(var(--sl-gauge-height) + var(--sl-space-11));
  margin: var(--sl-space-5) auto;
}

.sl-pres-vitals > .sl-pres-ring > div > b {
  font-size: var(--sl-font-display);
}

.sl-pres-vitals .sl-knob-svg > circle {
  stroke-width: 1;
}

.sl-pres-vitals .sl-knob-svg > circle:nth-child(n + 3) {
  stroke-width: 0.5;
}

.sl-pres .sl-pres-vitals .sl-knob-svg > circle:nth-child(4) {
  color: var(--sl-accent);
}

.sl-pres .sl-pres-vitals .sl-knob-svg > circle:nth-child(6) {
  color: var(--sl-pres-good-text);
}

.sl-pres-vitals > h3 {
  margin: var(--sl-space-3) 0;
  font-size: var(--sl-font-h4);
  color: var(--sl-pres-text);
}

.sl-pres-vitals > p {
  margin: var(--sl-space-5) 0;
  font-size: var(--sl-font-small);
  line-height: var(--sl-line-loose);
  color: var(--sl-pres-muted-text);
}

.sl-pres-vitals-list {
  display: grid;
  gap: var(--sl-space-3);
  margin: var(--sl-space-5) 0;
}

.sl-pres-vitals-list > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sl-space-4);
  font-size: var(--sl-font-small);
  color: var(--sl-pres-muted-text);
}

.sl-pres-vitals-list b {
  color: var(--sl-pres-text);
}

.sl-pres-vitals-list .bi {
  color: var(--sl-pres-good-text);
}

/* Modules: partials/presentation-modules.html; the eight modules stand on the map by order - corners, flanks, diagonal */
.sl-pres-modules {
  display: grid;
  grid-template-columns: 1.55fr 0.75fr;
  gap: var(--sl-space-4);
}

/* The build presets over the map: the caption, the segment of builds and the demo note on its own line */
.sl-pres-presets {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sl-space-4);
  font-size: var(--sl-font-small);
  color: var(--sl-pres-text);
}

.sl-pres-presets > small {
  flex-basis: 100%;
  font-size: var(--sl-font-micro);
  color: var(--sl-pres-muted-text);
}

.sl-pres-map {
  background-image: radial-gradient(circle at 50% 50%, var(--sl-tint), transparent 35%), var(--sl-pres-bg);
  background-size: auto, 24px 24px, 24px 24px;
}

.sl-pres-map-core,
.sl-pres-router,
.sl-pres-net,
.sl-pres-flow-core {
  box-shadow: var(--sl-shadow-focus), 0 0 var(--sl-space-8) var(--sl-tint-strong), inset 0 0 var(--sl-space-5) var(--sl-tint);
}

.sl-pres-map-core {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: var(--sl-z-raised);
  display: grid;
  place-items: center;
  width: calc(var(--sl-pres-width) * 0.75);
  height: calc(var(--sl-pres-width) * 0.75);
  border: 1px solid var(--sl-pres-link-text);
  border-radius: var(--sl-radius-circle);
  background: radial-gradient(circle, var(--sl-pres-core-bg), var(--sl-pres-panel-bg) 68%);
  transform: translate(-50%, -50%);
}

/* The mark is taller than wide: its height is capped, as #content img keeps the height auto */
.sl-pres-map-core img {
  max-height: calc(var(--sl-pres-width) * 0.75 - var(--sl-space-1) - var(--sl-space-3) * 2);
}

.sl-pres-orbit {
  position: absolute;
  inset: -12px;
  border: 1px solid var(--sl-primary-subtle);
  border-radius: var(--sl-radius-circle);
  animation: sl-pres-spin calc(var(--sl-pres-dur) * 4) linear infinite;
  box-shadow: var(--sl-pres-shadow);
}

/* Four marks on the orbit: two of its own at the top and the right, two of the inner half turn at the bottom and the left */
.sl-pres-orbit > i {
  position: absolute;
  inset: 0;
  transform: rotate(180deg);
}

.sl-pres-orbit::before,
.sl-pres-orbit::after,
.sl-pres-orbit > i::before,
.sl-pres-orbit > i::after {
  content: "";
  position: absolute;
  width: var(--sl-space-2);
  height: var(--sl-space-2);
  border-radius: var(--sl-radius-circle);
  background: var(--sl-primary);
  box-shadow: var(--sl-pres-shadow);
}

.sl-pres-orbit::before,
.sl-pres-orbit > i::before {
  top: -3px;
  left: calc(50% - var(--sl-space-1));
}

.sl-pres-orbit::after,
.sl-pres-orbit > i::after {
  top: calc(50% - var(--sl-space-1));
  right: -3px;
}

.sl-pres-mod {
  position: absolute;
  width: calc(var(--sl-pres-width) * 0.85);
  border: 1px solid var(--sl-pres-frame-border);
  border-radius: var(--sl-radius-2);
  background: var(--sl-pres-inset-bg);
  padding: var(--sl-space-3) var(--sl-space-4);
  transition: transform var(--sl-time-slow) var(--sl-ease-in-out), border-color var(--sl-time-slow) var(--sl-ease-in-out), box-shadow var(--sl-time-slow) var(--sl-ease-in-out);
}

.sl-pres-mod:hover {
  border-color: var(--sl-primary);
  box-shadow: var(--sl-shadow-float);
  transform: translateY(-3px) scale(1.02);
}

.sl-pres-mod > b {
  display: block;
  font-size: var(--sl-font-body);
  color: var(--sl-pres-text);
}

.sl-pres-mod > .sl-pres-dot {
  position: absolute;
  top: var(--sl-space-3);
  right: var(--sl-space-3);
  width: var(--sl-space-2);
  height: var(--sl-space-2);
  color: var(--sl-pres-frame-border);
  box-shadow: none;
}

.sl-pres-mod.sl-is-on > .sl-pres-dot {
  color: var(--sl-pres-good-text);
}

.sl-pres-mod.sl-is-off {
  opacity: var(--sl-fade-disabled);
}

.sl-pres-mod:nth-child(1 of .sl-pres-mod) { top: 9%; left: 4%; }
.sl-pres-mod:nth-child(2 of .sl-pres-mod) { bottom: 9%; left: 4%; }
.sl-pres-mod:nth-child(3 of .sl-pres-mod) { top: 9%; right: 4%; }
.sl-pres-mod:nth-child(4 of .sl-pres-mod) { right: 4%; bottom: 9%; }
.sl-pres-mod:nth-child(5 of .sl-pres-mod) { top: 43%; left: 19%; }
.sl-pres-mod:nth-child(6 of .sl-pres-mod) { top: 43%; right: 19%; }
.sl-pres-mod:nth-child(7 of .sl-pres-mod) { top: 6%; left: 34%; }
.sl-pres-mod:nth-child(8 of .sl-pres-mod) { right: 34%; bottom: 6%; }

.sl-pres-detail,
.sl-pres-guard-console,
.sl-pres-dev-side,
.sl-pres-stats-side {
  display: grid;
  gap: var(--sl-space-3);
  align-content: start;
}

.sl-pres-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sl-space-2);
  margin-top: var(--sl-space-3);
}

.sl-pres-tags > span {
  border: 1px solid var(--sl-pres-border);
  border-radius: var(--sl-radius-pill);
  background: var(--sl-pres-ground-bg);
  padding: var(--sl-space-1) var(--sl-space-3);
  font-family: var(--sl-face-mono);
  font-size: var(--sl-font-micro);
  color: var(--sl-pres-link-text);
}

/* Block router: the page mock in the middle, the block nodes on both sides wired to the slot they fill */
.sl-pres-blocks {
  grid-column: 1 / -1;
  margin-top: var(--sl-space-4);
  overflow: hidden;
  border: 1px solid var(--sl-pres-border);
  border-radius: var(--sl-radius-3);
  background: var(--sl-pres-panel-bg);
}

/* High enough for the tall page between the first and the last row of nodes */
.sl-pres-blocks-stage {
  min-height: calc(var(--sl-pres-height) + var(--sl-space-11) * 10);
}

.sl-pres-blocks-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 0.55fr);
  gap: var(--sl-space-3);
  padding: var(--sl-space-3) 0 0;
}

.sl-pres-blocks-stage {
  border-radius: var(--sl-radius-2);
}

/* The page mock: the slots of the layout drawn as dashed boxes, the content in the middle, each slot lit while a block fills it; tall like a page */
.sl-pres-page {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: var(--sl-z-raised);
  width: calc(var(--sl-pres-width) * 2 + var(--sl-space-11) * 2);
  max-width: calc(100% - var(--sl-space-5) * 2);
  border: 1px solid var(--sl-primary-subtle);
  border-radius: var(--sl-radius-3);
  background: var(--sl-pres-inset-bg);
  padding: var(--sl-space-3);
  box-shadow: var(--sl-shadow-focus), var(--sl-shadow-float);
  transform: translate(-50%, -50%);
}

.sl-pres-slot {
  display: grid;
  place-items: center;
  min-height: var(--sl-space-11);
  border: 1px dashed var(--sl-pres-frame-border);
  border-radius: var(--sl-radius-1);
  background: var(--sl-pres-panel-bg);
  color: var(--sl-pres-muted-text);
  font-family: var(--sl-face-mono);
  font-size: var(--sl-font-micro);
  letter-spacing: var(--sl-track-wide);
  transition: border-color var(--sl-time-slow) var(--sl-ease-out), background-color var(--sl-time-slow) var(--sl-ease-out), color var(--sl-time-slow) var(--sl-ease-out);
}

.sl-pres-slot.sl-is-on {
  border-color: var(--sl-primary);
  background: var(--sl-tint);
  color: var(--sl-pres-link-text);
}

/* The place of the page the block card under the pointer stands in, and the card itself on the stage and in the list */
.sl-pres-slot.sl-is-hot {
  border-style: solid;
  border-color: var(--sl-pres-link-text);
  background: var(--sl-tint-strong);
  color: var(--sl-pres-text);
}

.sl-pres-blocks-stage > .sl-pres-node.sl-is-hot,
.sl-pres-bcard.sl-is-hot {
  border-color: var(--sl-pres-link-text);
  box-shadow: var(--sl-pres-shadow);
}

.sl-pres-page-grid {
  display: grid;
  grid-template-columns: calc(var(--sl-space-9) * 2) 1fr calc(var(--sl-space-9) * 2);
  gap: var(--sl-space-2);
  margin: var(--sl-space-3) 0;
}

.sl-pres-page-grid > div {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--sl-space-2);
}

.sl-pres-page-grid > aside > span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.sl-pres-page-content {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--sl-space-1);
  min-height: calc(var(--sl-pres-width) * 1.75);
  border: 1px solid var(--sl-pres-frame-border);
  border-radius: var(--sl-radius-1);
  background: var(--sl-pres-ground-bg);
  color: var(--sl-pres-link-text);
}

.sl-pres-page-content > .bi {
  font-size: var(--sl-font-body);
}

.sl-pres-page-content > b {
  font-size: var(--sl-font-micro);
}

/* The block nodes are placed by their centre, so the sides and the rows stay symmetric at any scene height */
.sl-pres-blocks-stage > [data-sl-pres-at] {
  transform: translateY(-50%);
}

.sl-pres-blocks-stage > [data-sl-pres-at].sl-is-on,
.sl-pres-blocks-stage > [data-sl-pres-at]:hover {
  transform: translateY(calc(-50% - 2px));
}

.sl-pres-blocks-stage > [data-sl-pres-at="left1"] { top: 12.5%; left: 3%; }
.sl-pres-blocks-stage > [data-sl-pres-at="left2"] { top: 37.5%; left: 3%; }
.sl-pres-blocks-stage > [data-sl-pres-at="left3"] { top: 62.5%; left: 3%; }
.sl-pres-blocks-stage > [data-sl-pres-at="left4"] { top: 87.5%; left: 3%; }
.sl-pres-blocks-stage > [data-sl-pres-at="right1"] { top: 12.5%; right: 3%; }
.sl-pres-blocks-stage > [data-sl-pres-at="right2"] { top: 37.5%; right: 3%; }
.sl-pres-blocks-stage > [data-sl-pres-at="right3"] { top: 62.5%; right: 3%; }
.sl-pres-blocks-stage > [data-sl-pres-at="right4"] { top: 87.5%; right: 3%; }
.sl-pres-blocks-stage > [data-sl-pres-at="top1"] { top: 12.5%; right: calc(50% + var(--sl-space-4)); }
.sl-pres-blocks-stage > [data-sl-pres-at="top2"] { top: 12.5%; left: calc(50% + var(--sl-space-4)); }
.sl-pres-blocks-stage > [data-sl-pres-at="bottom1"] { top: 87.5%; right: calc(50% + var(--sl-space-4)); }
.sl-pres-blocks-stage > [data-sl-pres-at="bottom2"] { top: 87.5%; left: calc(50% + var(--sl-space-4)); }

/* The router in the content slot: at least a node wide, the wordmark of the request path over the two captions, one inset on every side */
.sl-pres-router {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: var(--sl-z-overlay);
  display: grid;
  place-items: center;
  gap: var(--sl-space-2);
  min-width: var(--sl-pres-width);
  border: 1px solid var(--sl-pres-link-text);
  border-radius: var(--sl-radius-3);
  background: radial-gradient(ellipse at 50% 40%, var(--sl-pres-core-bg), var(--sl-pres-panel-bg) 75%);
  padding: var(--sl-space-5);
  white-space: nowrap;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.sl-pres-router > b,
.sl-pres-bcard > b,
.sl-pres-rules b {
  font-size: var(--sl-font-micro);
  color: var(--sl-pres-text);
}

/* Router panel: the active layout, its block list and the four rules */
.sl-pres-blocks-panel {
  overflow: hidden;
  border: 1px solid var(--sl-pres-border);
  border-radius: var(--sl-radius-2);
  background: var(--sl-pres-panel-bg);
}

.sl-pres-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sl-space-3);
  border-bottom: 1px solid var(--sl-pres-border);
  padding: var(--sl-space-3) var(--sl-space-4);
  font-family: var(--sl-face-mono);
  font-size: var(--sl-font-micro);
  letter-spacing: var(--sl-track-wide);
  color: var(--sl-pres-muted-text);
}

.sl-pres-panel-head em {
  font-style: normal;
}

.sl-pres-panel-head > b > .sl-pres-dot,
.sl-pres-panel-head > span > .sl-pres-dot {
  margin-right: var(--sl-space-2);
}

/* The one head of every inner block: as the first child of a padded box it reaches the box edges, so its line runs from frame to frame */
.sl-pres-card > .sl-pres-panel-head:first-child,
.sl-pres-claim > .sl-pres-panel-head:first-child {
  margin: calc(var(--sl-space-5) * -1) calc(var(--sl-space-5) * -1) var(--sl-space-4);
}

.sl-pres-vitals > .sl-pres-panel-head:first-child {
  align-self: stretch;
  margin: calc(var(--sl-space-6) * -1) calc(var(--sl-space-6) * -1) var(--sl-space-4);
}

.sl-pres-hours > .sl-pres-panel-head:first-child {
  margin: calc(var(--sl-space-4) * -1) calc(var(--sl-space-4) * -1) 0;
}

.sl-pres-panel-head > b,
.sl-pres-ambient b,
.sl-pres-sql b,
.sl-pres-gallery-head > b {
  font-weight: var(--sl-weight-medium);
  color: var(--sl-pres-link-text);
}

.sl-pres-blocks-list {
  display: grid;
  gap: var(--sl-space-2);
  align-content: start;
  min-height: calc(var(--sl-pres-height) / 2);
  padding: var(--sl-space-3);
}

.sl-pres-bcard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sl-space-2);
  border: 1px solid var(--sl-pres-border);
  border-radius: var(--sl-radius-1);
  background: var(--sl-pres-ground-bg);
  padding: var(--sl-space-3);
}

/* A long word of a block title is hyphenated by syllable: the break anywhere #content gives a page cut it at any letter */
.sl-pres-blocks-stage > .sl-pres-node > b {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: auto;
  hyphenate-limit-chars: 13 6 5;
}

.sl-pres-bcard > span {
  font-family: var(--sl-face-mono);
  font-size: var(--sl-font-micro);
  color: var(--sl-pres-good-text);
}

.sl-pres-bcard > b {
  grid-column: 1 / -1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sl-pres-bcard > small {
  font-family: var(--sl-face-mono);
  font-size: var(--sl-font-micro);
  color: var(--sl-pres-muted-text);
}

/* A rule is one row like every row list: icon and caption left, its values right on the same line */
.sl-pres-rules {
  display: grid;
  border-top: 1px solid var(--sl-pres-border);
}

.sl-pres-rules > span {
  display: grid;
  grid-template-columns: var(--sl-size-icon-xs) auto minmax(0, 1fr);
  gap: var(--sl-space-2);
  align-items: center;
  border-bottom: 1px solid var(--sl-pres-border);
  padding: var(--sl-space-2) var(--sl-space-3);
}

.sl-pres-rules > span:last-child {
  border-bottom: 0;
}

.sl-pres-rules em {
  overflow: hidden;
  font-family: var(--sl-face-mono);
  font-size: var(--sl-font-micro);
  font-style: normal;
  color: var(--sl-pres-muted-text);
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Guard: partials/presentation-guard.html; every figure is a share of the house width or the court height */
.sl-pres-guard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 292px;
  gap: var(--sl-space-4);
}

.sl-pres-guard-scene {
  min-height: calc(var(--sl-guard-height) * 1.5);
  background-image: radial-gradient(circle at 85% 28%, var(--sl-tint), transparent 40%), var(--sl-pres-bg);
  background-size: auto, 24px 24px, 24px 24px;
}

/* A faint rain of code under the whole scene: a mask tile in the tint, one tile taller than the scene, sliding on transform */
.sl-pres-matrix {
  position: absolute;
  top: calc(var(--sl-guard-width) * -2.5);
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--sl-pres-rain-bg);
  mask-image: url("../../images/effects/matrix.svg");
  mask-size: calc(var(--sl-guard-width) * 1.25) calc(var(--sl-guard-width) * 2.5);
  animation: sl-pres-matrix calc(var(--sl-pres-dur) * 5) linear infinite;
  pointer-events: none;
}

@keyframes sl-pres-matrix {
  to { transform: translateY(calc(var(--sl-guard-width) * 2.5)); }
}

/* The ground line the house stands on, and the paving under it */
.sl-pres-guard-scene::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: calc(var(--sl-guard-height) * 0.22);
  left: 0;
  height: 1px;
  background: var(--sl-primary-subtle);
  box-shadow: var(--sl-pres-shadow);
}

.sl-pres-zone {
  position: absolute;
  top: calc(var(--sl-guard-height) * 0.16);
  z-index: var(--sl-z-overlay);
  font-family: var(--sl-face-mono);
  font-size: var(--sl-font-micro);
  letter-spacing: var(--sl-track-wide);
  color: var(--sl-pres-muted-text);
}

.sl-pres-zone::after {
  content: "";
  display: block;
  width: calc(var(--sl-guard-width) * 0.24);
  height: 1px;
  margin-top: var(--sl-space-2);
  background: var(--sl-primary-subtle);
}

.sl-pres-zone:nth-child(1 of .sl-pres-zone) {
  left: var(--sl-space-7);
}

.sl-pres-zone:nth-child(2 of .sl-pres-zone) {
  left: 50%;
  text-align: center;
  transform: translateX(-50%);
}

.sl-pres-zone:nth-child(2 of .sl-pres-zone)::after {
  margin-right: auto;
  margin-left: auto;
}

.sl-pres-zone:nth-child(3 of .sl-pres-zone) {
  right: var(--sl-space-8);
  text-align: right;
}

.sl-pres-zone:nth-child(3 of .sl-pres-zone)::after {
  margin-left: auto;
}

/* The radar behind the ingress: two rings and a sweeping hand; it and the globe stand at the middle of the lanes, 0.25 + 0.44 / 2 */
.sl-pres-radar {
  position: absolute;
  top: calc(var(--sl-guard-height) * 0.47);
  left: calc(var(--sl-space-6) + var(--sl-space-8));
  width: calc(var(--sl-guard-width) * 0.53);
  height: calc(var(--sl-guard-width) * 0.53);
  border: 1px solid var(--sl-tint);
  border-radius: var(--sl-radius-circle);
  box-shadow: 0 0 0 var(--sl-space-6) var(--sl-tint);
  transform: translateY(-50%);
}

.sl-pres-radar::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px dashed var(--sl-tint-strong);
  border-radius: var(--sl-radius-circle);
  animation: sl-pres-spin calc(var(--sl-pres-dur) * 3) linear infinite;
}

.sl-pres-radar::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--sl-guard-width) * 0.24);
  height: 1px;
  background: linear-gradient(90deg, var(--sl-primary), transparent);
  transform-origin: left;
  animation: sl-pres-spin var(--sl-pres-dur) linear infinite;
}

/* The ingress node: the globe the traffic comes from */
.sl-pres-net {
  position: absolute;
  top: calc(var(--sl-guard-height) * 0.47);
  left: calc(var(--sl-space-9) + var(--sl-space-8));
  z-index: var(--sl-z-overlay);
  display: grid;
  place-items: center;
  width: calc(var(--sl-guard-width) * 0.375);
  height: calc(var(--sl-guard-width) * 0.375);
  border: 1px solid var(--sl-pres-link-text);
  border-radius: var(--sl-radius-circle);
  background: radial-gradient(circle, var(--sl-pres-inset-bg), var(--sl-pres-panel-bg) 66%);
  color: var(--sl-pres-muted-text);
  transform: translateY(-50%);
}

.sl-pres-net > .bi {
  color: var(--sl-pres-link-text);
  font-size: var(--sl-font-h1);
}

/* Two waves leave the globe in turn, on transform and opacity only */
.sl-pres-net::before,
.sl-pres-net::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid var(--sl-pres-link-text);
  border-radius: var(--sl-radius-circle);
  opacity: 0;
  animation: sl-pres-ping calc(var(--sl-pres-dur) * 0.75) var(--sl-ease-out) infinite;
  pointer-events: none;
}

.sl-pres-net::after {
  animation-delay: calc(var(--sl-pres-dur) * 0.375);
}

@keyframes sl-pres-ping {
  from { opacity: var(--sl-fade-muted); transform: scale(1); }
  to { opacity: 0; transform: scale(1.9); }
}

.sl-pres-net > span {
  position: absolute;
  top: 100%;
  width: calc(var(--sl-guard-width) * 0.58);
  margin-top: var(--sl-space-3);
  font-family: var(--sl-face-mono);
  font-size: var(--sl-font-micro);
  letter-spacing: var(--sl-track-wide);
  color: var(--sl-pres-muted-text);
  text-align: center;
}

/* The five lanes the requests travel: each carries one dot at its own pace */
.sl-pres-lanes {
  position: absolute;
  top: calc(var(--sl-guard-height) * 0.25);
  right: calc(var(--sl-guard-width) * 0.71);
  left: calc(var(--sl-guard-width) * 0.51);
  z-index: var(--sl-z-raised);
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  height: calc(var(--sl-guard-height) * 0.44);
  pointer-events: none;
}

.sl-pres-lanes > div {
  position: relative;
  border-bottom: 1px dashed var(--sl-pres-border);
}

.sl-pres-lanes > div::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--sl-pres-frame-border), transparent);
}

.sl-pres-lanes i {
  position: absolute;
  top: calc(50% - 2px);
  width: var(--sl-space-2);
  height: var(--sl-space-2);
  border-radius: var(--sl-radius-circle);
  background: var(--sl-primary);
  box-shadow: var(--sl-pres-shadow);
  opacity: var(--sl-fade-muted);
  animation: sl-pres-lane calc(var(--sl-pres-dur) * 2) linear infinite;
}

.sl-pres-lanes > div:nth-child(2) i { animation-duration: calc(var(--sl-pres-dur) * 2.2); animation-delay: calc(var(--sl-pres-dur) * -1.3); }
.sl-pres-lanes > div:nth-child(3) i { animation-duration: calc(var(--sl-pres-dur) * 1.7); animation-delay: calc(var(--sl-pres-dur) * -0.9); }
.sl-pres-lanes > div:nth-child(4) i { animation-duration: calc(var(--sl-pres-dur) * 2.4); animation-delay: calc(var(--sl-pres-dur) * -1.7); }
.sl-pres-lanes > div:nth-child(5) i { animation-duration: calc(var(--sl-pres-dur) * 2); animation-delay: calc(var(--sl-pres-dur) * -0.6); }

@keyframes sl-pres-lane {
  from { left: 0; opacity: 0; }
  8% { opacity: var(--sl-fade-muted); }
  88% { opacity: var(--sl-fade-muted); }
  to { left: 100%; opacity: 0; }
}

/* The three ambient readings pinned to the corners of the court */
.sl-pres-ambient {
  position: absolute;
  z-index: var(--sl-z-overlay);
  border: 1px solid var(--sl-pres-border);
  border-radius: var(--sl-radius-pill);
  background: color-mix(in srgb, var(--sl-pres-panel-bg) var(--sl-modal-btn-mix), transparent);
  padding: var(--sl-space-2) var(--sl-space-3);
  font-family: var(--sl-face-mono);
  font-size: var(--sl-font-micro);
  color: var(--sl-pres-muted-text);
}

.sl-pres-ambient strong {
  margin-right: var(--sl-space-2);
  font-size: var(--sl-font-small);
  color: var(--sl-pres-link-text);
}

.sl-pres-ambient .bi {
  margin-right: var(--sl-space-2);
  color: var(--sl-pres-good-text);
}

.sl-pres-ambient:nth-child(1 of .sl-pres-ambient) { bottom: var(--sl-space-7); left: var(--sl-space-7); }
.sl-pres-ambient:nth-child(2 of .sl-pres-ambient) { right: var(--sl-space-7); bottom: var(--sl-space-7); }

/* The policy closes the top row of chips: its word in bold, then the rule */
.sl-pres-traffic > .sl-pres-policy > b {
  font-weight: var(--sl-weight-medium);
}

/* The ingress queue over the rate chip: the next requests the globe serves, the top one leaves on a throw, a new one enters below */
.sl-pres-queue {
  position: absolute;
  bottom: calc(var(--sl-space-7) + var(--sl-space-10));
  left: var(--sl-space-7);
  z-index: var(--sl-z-overlay);
  width: calc(var(--sl-guard-width) * 1.1);
  border: 1px solid var(--sl-pres-border);
  border-radius: var(--sl-radius-2);
  background: color-mix(in srgb, var(--sl-pres-panel-bg) var(--sl-modal-btn-mix), transparent);
  padding: var(--sl-space-3);
  font-family: var(--sl-face-mono);
  font-size: var(--sl-font-micro);
  color: var(--sl-pres-muted-text);
}

.sl-pres-queue > span {
  display: block;
  margin-bottom: var(--sl-space-2);
  letter-spacing: var(--sl-track-wide);
  text-transform: uppercase;
}

.sl-pres-queue > ol {
  display: grid;
  gap: var(--sl-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sl-pres-queue li {
  display: grid;
  grid-template-columns: var(--sl-size-icon-xs) auto minmax(0, 1fr);
  gap: var(--sl-space-3);
  align-items: center;
  border: 1px solid color-mix(in srgb, currentColor var(--sl-tile-mix), var(--sl-pres-frame-border));
  border-radius: var(--sl-radius-1);
  background: var(--sl-pres-panel-bg);
  padding: var(--sl-space-2) var(--sl-space-3);
  transition: opacity var(--sl-time-slow) var(--sl-ease-out), transform var(--sl-time-slow) var(--sl-ease-out);
}

.sl-pres-queue li > b {
  letter-spacing: var(--sl-track-wide);
  text-transform: uppercase;
}

.sl-pres-queue li > small {
  overflow: hidden;
  color: var(--sl-pres-muted-text);
  font-size: var(--sl-font-micro);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sl-pres-queue li:first-child {
  box-shadow: 0 0 var(--sl-space-5) color-mix(in srgb, currentColor var(--sl-gauge-mix), transparent);
}

.sl-pres-queue li.sl-is-out {
  opacity: 0;
  transform: translateX(var(--sl-space-8));
}

.sl-pres-queue li:last-child {
  animation: sl-pres-enter var(--sl-time-slow) var(--sl-ease-out);
}

@keyframes sl-pres-enter {
  from { opacity: 0; transform: translateY(var(--sl-space-5)); }
}

/* The run of the globe does not inherit either: the plugin writes it on the globe and its radar alone, the two move as one */
@property --sl-d-net-y {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

.sl-pres-guard-scene[data-sl-pres-live] .sl-pres-net,
.sl-pres-guard-scene[data-sl-pres-live] .sl-pres-radar {
  transform: translateY(calc(-50% + var(--sl-d-net-y)));
}

.sl-pres-traffic {
  position: absolute;
  top: var(--sl-space-4);
  left: var(--sl-space-5);
  z-index: var(--sl-z-overlay);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sl-space-2);
  max-width: calc(100% - var(--sl-guard-width) * 0.7);
}

.sl-pres-traffic > span {
  display: inline-flex;
  align-items: center;
  gap: var(--sl-space-2);
  border: 1px solid var(--sl-pres-border);
  border-radius: var(--sl-radius-pill);
  background: color-mix(in srgb, var(--sl-pres-panel-bg) var(--sl-modal-btn-mix), transparent);
  padding: var(--sl-space-2) var(--sl-space-3);
  font-family: var(--sl-face-mono);
  font-size: var(--sl-font-micro);
  color: var(--sl-pres-muted-text);
}

.sl-pres-traffic .bi {
  font-size: var(--sl-font-micro);
  color: currentColor;
}

.sl-pres-badge {
  position: absolute;
  top: var(--sl-space-4);
  right: var(--sl-space-5);
  z-index: var(--sl-z-overlay);
  border: 1px solid var(--sl-pres-frame-border);
  border-radius: var(--sl-radius-pill);
  background: var(--sl-pres-panel-bg);
  padding: var(--sl-space-2) var(--sl-space-3);
  font-family: var(--sl-face-mono);
  font-size: var(--sl-font-micro);
  letter-spacing: var(--sl-track-wide);
  color: var(--sl-pres-good-text);
}

/* The allow bus from the gate to the house, and the deny drop from the gate to the quarantine */
.sl-pres-allow {
  position: absolute;
  top: calc(var(--sl-guard-height) * 0.476);
  right: calc(var(--sl-guard-width) * 0.76);
  left: calc(50% + var(--sl-space-9));
  z-index: var(--sl-z-overlay);
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--sl-primary) 0 7px, transparent 7px 14px);
  opacity: var(--sl-fade-disabled);
  animation: sl-pres-bus calc(var(--sl-pres-dur) / 2) linear infinite;
}

.sl-pres-allow::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -2px;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-left: var(--sl-space-3) solid var(--sl-primary);
}

@keyframes sl-pres-bus {
  to { background-position: 28px 0; }
}

.sl-pres-allow > span,
.sl-pres-deny > span,
.sl-pres-track > span {
  position: absolute;
  font-family: var(--sl-face-mono);
  font-size: var(--sl-font-micro);
  letter-spacing: var(--sl-track-wide);
  color: var(--sl-pres-muted-text);
  white-space: nowrap;
}

.sl-pres-allow > span {
  top: -14px;
  left: 50%;
  background: var(--sl-pres-panel-bg);
  transform: translateX(-50%);
}

.sl-pres-deny {
  position: absolute;
  top: calc(var(--sl-guard-height) * 0.7);
  bottom: calc(var(--sl-guard-height) * 0.19);
  left: 50%;
  z-index: var(--sl-z-overlay);
  width: 1px;
  background: repeating-linear-gradient(180deg, var(--sl-danger) 0 6px, transparent 6px 12px);
  opacity: var(--sl-fade-disabled);
  animation: sl-pres-drop calc(var(--sl-pres-dur) / 2) linear infinite;
}

.sl-pres-deny::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: -3px;
  border-top: var(--sl-space-3) solid var(--sl-danger);
  border-right: 3px solid transparent;
  border-left: 3px solid transparent;
}

@keyframes sl-pres-drop {
  to { background-position: 0 24px; }
}

.sl-pres-deny > span {
  top: 42%;
  left: var(--sl-space-3);
  color: var(--sl-danger);
}

/* The court the gate stands on */
.sl-pres-track {
  position: absolute;
  top: calc(var(--sl-guard-height) * 0.22);
  bottom: calc(var(--sl-guard-height) * 0.24);
  left: 50%;
  z-index: var(--sl-z-raised);
  width: 1px;
  border-left: 1px dashed var(--sl-primary-subtle);
  transform: translateX(-50%);
  pointer-events: none;
}

.sl-pres-track::before,
.sl-pres-track::after {
  content: "";
  position: absolute;
  left: -4px;
  width: var(--sl-space-3);
  height: var(--sl-space-3);
  border: 1px solid var(--sl-pres-frame-border);
  border-radius: var(--sl-radius-circle);
  background: var(--sl-pres-panel-bg);
}

.sl-pres-track::before {
  top: -3px;
}

.sl-pres-track::after {
  bottom: -3px;
}

.sl-pres-track > span {
  top: 50%;
  left: var(--sl-space-3);
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: left center;
}

/* The gate: a shield on a beam, the status under it */
.sl-pres-gate {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: var(--sl-z-dropdown);
  display: grid;
  place-items: center;
  width: calc(var(--sl-guard-width) * 0.33);
  height: calc(var(--sl-guard-width) * 0.28);
  transform: translate(-50%, -50%);
}

.sl-pres-beam {
  position: absolute;
  top: calc(var(--sl-space-6) * -1);
  bottom: calc(var(--sl-space-6) * -1);
  left: 50%;
  width: var(--sl-space-1);
  border-radius: var(--sl-radius-pill);
  background: linear-gradient(transparent, var(--sl-primary) 30%, var(--sl-primary) 70%, transparent);
  opacity: var(--sl-fade-muted);
  animation: sl-pres-breathe calc(var(--sl-pres-dur) / 4) var(--sl-ease-in-out) infinite alternate;
}

.sl-pres-shield {
  position: relative;
  display: grid;
  place-items: center;
  width: calc(var(--sl-guard-width) * 0.25);
  height: calc(var(--sl-guard-width) * 0.25);
  border: 1px solid var(--sl-primary);
  border-radius: var(--sl-radius-3);
  background: var(--sl-pres-inset-bg);
  box-shadow: var(--sl-pres-shadow);
  color: var(--sl-pres-link-text);
}

.sl-pres-shield::before {
  content: "";
  position: absolute;
  inset: -8px;
  border: 1px dashed var(--sl-pres-link-text);
  border-radius: var(--sl-radius-3);
  opacity: var(--sl-fade-muted);
  animation: sl-pres-spin calc(var(--sl-pres-dur) * 2) linear infinite;
}

/* The scan line: it runs down the shield and back in the colour of the state, so a pass sweeps green and a block red */
.sl-pres-shield::after {
  content: "";
  position: absolute;
  top: var(--sl-space-2);
  right: var(--sl-space-2);
  left: var(--sl-space-2);
  height: var(--sl-space-1);
  border-radius: var(--sl-radius-pill);
  background: linear-gradient(90deg, transparent, currentColor, transparent);
  box-shadow: 0 0 var(--sl-space-4) color-mix(in srgb, currentColor var(--sl-gauge-mix), transparent);
  animation: sl-pres-sweep calc(var(--sl-pres-dur) / 2) var(--sl-ease-in-out) infinite alternate;
  pointer-events: none;
}

@keyframes sl-pres-sweep {
  to { transform: translateY(calc(var(--sl-guard-width) * 0.25 - var(--sl-space-2) * 2 - var(--sl-space-1))); }
}

.sl-pres-shield > .bi {
  font-size: var(--sl-font-h2);
}

.sl-pres-shield > small {
  position: absolute;
  bottom: calc(var(--sl-space-8) * -1);
  left: 50%;
  min-width: var(--sl-size-icon-xl);
  border: 1px solid var(--sl-pres-border);
  border-radius: var(--sl-radius-pill);
  background: var(--sl-pres-panel-bg);
  padding: var(--sl-space-1) var(--sl-space-2);
  font-family: var(--sl-face-mono);
  font-size: var(--sl-font-micro);
  letter-spacing: var(--sl-track-wide);
  text-align: center;
  white-space: nowrap;
  transform: translateX(-50%);
}

/* The run of the gate does not inherit, so a frame of the patrol restyles the gate alone */
@property --sl-d-gate-y {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

/* The gate the plugin drives: a whole pixel by --sl-d-gate-top, patrols in whole pixels of --sl-d-gate-y on transform, so no frame lays out; its state colours shield and word */
.sl-pres-guard-scene[data-sl-pres-live] .sl-pres-gate {
  top: var(--sl-d-gate-top);
  transform: translate(-50%, var(--sl-d-gate-y));
}

.sl-pres-gate[data-sl-pres-state="check"] .sl-pres-shield {
  border-color: var(--sl-pres-link-text);
  box-shadow: 0 0 var(--sl-space-9) var(--sl-tint-strong);
}

.sl-pres-gate[data-sl-pres-state="pass"] .sl-pres-shield {
  border-color: var(--sl-pres-good-text);
  color: var(--sl-pres-good-text);
  box-shadow: 0 0 var(--sl-space-9) color-mix(in srgb, var(--sl-success) var(--sl-gauge-mix), transparent);
}

.sl-pres-gate[data-sl-pres-state="block"] .sl-pres-shield {
  border-color: var(--sl-danger);
  color: var(--sl-danger);
  box-shadow: 0 0 var(--sl-space-10) color-mix(in srgb, var(--sl-danger) var(--sl-gauge-mix), transparent);
}

/* The guard switched off by the switch of the section: the shield goes dark and stops turning */
.sl-pres-guard[data-sl-pres-guard="0"] .sl-pres-shield {
  border-color: var(--sl-pres-frame-border);
  color: var(--sl-pres-muted-text);
  box-shadow: none;
  opacity: var(--sl-fade-muted);
}

.sl-pres-guard[data-sl-pres-guard="0"] .sl-pres-shield::before,
.sl-pres-guard[data-sl-pres-guard="0"] .sl-pres-beam {
  animation: none;
}

.sl-pres-guard[data-sl-pres-guard="0"] .sl-pres-shield::after {
  display: none;
}

.sl-pres-guard[data-sl-pres-guard="0"] .sl-pres-badge {
  color: var(--sl-danger);
}

/* The traveller: a request card the plugin clones from the hidden pool and carries by --sl-d-x and --sl-d-y */
.sl-pres-traveler {
  position: absolute;
  top: var(--sl-d-y);
  left: var(--sl-d-x);
  z-index: var(--sl-z-overlay);
  display: flex;
  align-items: center;
  gap: var(--sl-space-3);
  transition: left calc(var(--sl-pres-dur) * 0.43) var(--sl-ease-in-out), top calc(var(--sl-pres-dur) * 0.43) var(--sl-ease-in-out);
  pointer-events: none;
}

.sl-pres-traveler > .bi {
  display: grid;
  place-items: center;
  width: var(--sl-size-chip);
  height: var(--sl-size-chip);
  border: 1px solid color-mix(in srgb, currentColor var(--sl-tile-mix), var(--sl-pres-frame-border));
  border-radius: var(--sl-radius-circle);
  background: color-mix(in srgb, currentColor var(--sl-ico-mix), var(--sl-pres-panel-bg));
  box-shadow: 0 0 var(--sl-space-5) color-mix(in srgb, currentColor var(--sl-gauge-mix), transparent);
  font-size: var(--sl-font-small);
}

.sl-pres-traveler > span {
  max-width: calc(var(--sl-guard-width) * 0.75);
  border: 1px solid color-mix(in srgb, currentColor var(--sl-tile-mix), var(--sl-pres-frame-border));
  border-radius: var(--sl-radius-2);
  background: var(--sl-pres-panel-bg);
  padding: var(--sl-space-2) var(--sl-space-3);
  box-shadow: var(--sl-shadow-raised);
  font-family: var(--sl-face-mono);
  font-size: var(--sl-font-micro);
}

.sl-pres-traveler b {
  display: block;
  letter-spacing: var(--sl-track-wide);
  text-transform: uppercase;
}

.sl-pres-traveler small {
  display: block;
  overflow: hidden;
  color: var(--sl-pres-muted-text);
  font-size: var(--sl-font-micro);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sl-pres-traveler[data-sl-pres-bad] > .bi {
  animation: sl-pres-evil calc(var(--sl-pres-dur) / 4) var(--sl-ease-in-out) infinite alternate;
}

@keyframes sl-pres-evil {
  to {
    box-shadow: 0 0 var(--sl-space-7) color-mix(in srgb, currentColor var(--sl-gauge-mix), transparent);
    transform: scale(1.06);
  }
}

.sl-pres-traveler.sl-is-caught {
  opacity: var(--sl-fade-disabled);
  transform: rotate(45deg) scale(0.5);
  transition: left calc(var(--sl-pres-dur) * 0.17) var(--sl-ease-in-out), top calc(var(--sl-pres-dur) * 0.17) var(--sl-ease-in-out),
    transform calc(var(--sl-pres-dur) * 0.17) var(--sl-ease-in-out), opacity calc(var(--sl-pres-dur) * 0.17) var(--sl-ease-in-out);
}

.sl-pres-traveler.sl-is-passed {
  opacity: 0;
  transform: scale(0.84);
  transition: left calc(var(--sl-pres-dur) * 0.25) var(--sl-ease-out), top calc(var(--sl-pres-dur) * 0.25) var(--sl-ease-out),
    transform calc(var(--sl-pres-dur) * 0.25) var(--sl-ease-out), opacity calc(var(--sl-pres-dur) * 0.08) var(--sl-ease-out) calc(var(--sl-pres-dur) * 0.25);
}

/* The quarantine: a striped box under the gate with its traps */
.sl-pres-quarantine {
  position: absolute;
  bottom: var(--sl-space-7);
  left: calc(50% - var(--sl-guard-width) * 0.3);
  z-index: var(--sl-z-overlay);
  width: calc(var(--sl-guard-width) * 0.6);
  height: calc(var(--sl-guard-width) * 0.28);
  overflow: hidden;
  border: 1px solid var(--sl-proof-border);
  border-radius: var(--sl-radius-2);
  background: var(--sl-proof-bg);
}

.sl-pres-quarantine::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 10px, var(--sl-tint) 10px 11px);
}

.sl-pres-quarantine > div:first-child {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding: var(--sl-space-3);
  font-family: var(--sl-face-mono);
  font-size: var(--sl-font-micro);
  letter-spacing: var(--sl-track-wide);
  color: var(--sl-pres-muted-text);
}

.sl-pres-quarantine b {
  color: var(--sl-danger);
}

.sl-pres-traps {
  position: absolute;
  right: var(--sl-space-3);
  bottom: var(--sl-space-3);
  left: var(--sl-space-3);
  display: flex;
  align-items: end;
  gap: var(--sl-space-2);
  height: var(--sl-space-7);
}

.sl-pres-traps > i {
  display: block;
  width: var(--sl-space-3);
  height: var(--sl-space-3);
  border-radius: var(--sl-radius-1);
  background: var(--sl-danger);
  opacity: var(--sl-fade-muted);
  transition: opacity var(--sl-time-base) var(--sl-ease-out), box-shadow var(--sl-time-base) var(--sl-ease-out);
}

/* A trap holding a caught request, and the count that flashes as it fills */
.sl-pres-traps > i.sl-is-full {
  opacity: 1;
  box-shadow: 0 0 var(--sl-space-3) color-mix(in srgb, var(--sl-danger) var(--sl-gauge-mix), transparent);
}

.sl-pres-quarantine.sl-is-hit b {
  display: inline-block;
  animation: sl-pres-pop var(--sl-time-slow) var(--sl-ease-out);
}

/* The house: roof, chimney, body, four panes, door, foundation, ground. Every part is a share of the house width */
.sl-pres-house {
  position: absolute;
  right: var(--sl-space-6);
  bottom: calc(var(--sl-guard-height) * 0.12);
  z-index: var(--sl-z-overlay);
  width: var(--sl-guard-width);
  height: calc(var(--sl-guard-width) * 1.06);
  filter: drop-shadow(0 var(--sl-space-5) var(--sl-space-8) var(--sl-scrim-subtle));
}

.sl-pres-chimney {
  position: absolute;
  top: calc(var(--sl-guard-width) * 0.09);
  right: calc(var(--sl-guard-width) * 0.17);
  z-index: var(--sl-z-raised);
  width: calc(var(--sl-guard-width) * 0.1);
  height: calc(var(--sl-guard-width) * 0.24);
  border: 1px solid var(--sl-pres-frame-border);
  border-bottom: 0;
  background: linear-gradient(90deg, var(--sl-pres-panel-bg), var(--sl-primary-subtle) 40%, var(--sl-pres-inset-bg));
}

.sl-pres-chimney::before {
  content: "";
  position: absolute;
  top: -5px;
  right: -4px;
  left: -4px;
  height: var(--sl-space-3);
  border: 1px solid var(--sl-pres-frame-border);
  border-radius: var(--sl-radius-1);
  background: var(--sl-pres-inset-bg);
}

.sl-pres-chimney > span {
  position: absolute;
  top: -16px;
  left: 50%;
  width: var(--sl-space-7);
  height: var(--sl-space-6);
  border: 1px solid var(--sl-primary);
  border-radius: var(--sl-radius-circle);
  opacity: 0;
  transform: translateX(-50%);
  animation: sl-pres-smoke calc(var(--sl-pres-dur) * 0.75) var(--sl-ease-out) infinite;
}

@keyframes sl-pres-smoke {
  0% { opacity: 0; transform: translate(-50%, 6px) scale(0.35); }
  35% { opacity: var(--sl-fade-disabled); }
  100% { opacity: 0; transform: translate(-35%, -20px) scale(1.25); }
}

.sl-pres-roof {
  position: absolute;
  top: var(--sl-space-3);
  right: 5px;
  left: 7px;
  z-index: var(--sl-z-overlay);
  height: calc(var(--sl-guard-width) * 0.41);
}

.sl-pres-roof-plane {
  position: absolute;
  top: calc(var(--sl-guard-width) * 0.11);
  right: 0;
  left: calc(var(--sl-guard-width) * 0.08);
  height: calc(var(--sl-guard-width) * 0.28);
  border-bottom: 1px solid var(--sl-pres-frame-border);
  background: linear-gradient(155deg, var(--sl-primary-subtle) 0, var(--sl-pres-inset-bg) 52%, var(--sl-pres-inset-bg) 100%);
  clip-path: polygon(12% 0, 74% 0, 100% 100%, 0 100%);
}

.sl-pres-roof-gable {
  position: absolute;
  top: 0;
  left: 2px;
  width: calc(var(--sl-guard-width) * 0.78);
  height: calc(var(--sl-guard-width) * 0.39);
  background: linear-gradient(160deg, var(--sl-primary-subtle), var(--sl-pres-inset-bg));
  clip-path: polygon(50% 0, 100% 91%, 96% 100%, 4% 100%, 0 91%);
}

.sl-pres-roof-gable::after {
  content: "";
  position: absolute;
  right: 7px;
  bottom: 0;
  left: 7px;
  height: var(--sl-space-2);
  border-radius: var(--sl-radius-1);
  background: linear-gradient(90deg, var(--sl-pres-panel-bg), var(--sl-pres-link-text) 12%, var(--sl-pres-link-text) 88%, var(--sl-pres-panel-bg));
}

.sl-pres-roof-fascia {
  position: absolute;
  right: 2px;
  bottom: 3px;
  left: 0;
  height: var(--sl-space-2);
  border-radius: var(--sl-radius-1);
  background: linear-gradient(90deg, var(--sl-pres-panel-bg), var(--sl-pres-link-text) 10%, var(--sl-pres-link-text) 88%, var(--sl-pres-panel-bg));
  box-shadow: var(--sl-shadow-xs);
}

.sl-pres-house-body {
  position: absolute;
  top: calc(var(--sl-guard-width) * 0.37);
  right: calc(var(--sl-guard-width) * 0.11);
  bottom: var(--sl-space-5);
  left: calc(var(--sl-guard-width) * 0.13);
  border: 1px solid var(--sl-pres-frame-border);
  border-radius: var(--sl-radius-1) var(--sl-radius-1) var(--sl-radius-2) var(--sl-radius-2);
  background: linear-gradient(180deg, var(--sl-pres-inset-bg), var(--sl-pres-inset-bg) 58%, var(--sl-pres-panel-bg));
  box-shadow: var(--sl-shadow-float);
}

.sl-pres-house-body::before {
  content: "";
  position: absolute;
  top: 0;
  right: var(--sl-space-3);
  left: var(--sl-space-3);
  height: var(--sl-space-2);
  background: linear-gradient(90deg, transparent, var(--sl-primary-subtle) 13%, var(--sl-primary-subtle) 87%, transparent);
  opacity: var(--sl-fade-muted);
}

.sl-pres-corner {
  position: absolute;
  top: 5px;
  bottom: 5px;
  width: var(--sl-space-2);
  border-right: 1px solid var(--sl-scrim-subtle);
  border-left: 1px solid var(--sl-primary-subtle);
}

.sl-pres-corner:nth-child(1 of .sl-pres-corner) {
  left: 7px;
}

.sl-pres-corner:nth-child(2 of .sl-pres-corner) {
  right: 7px;
}

.sl-pres-panes {
  position: absolute;
  top: calc(var(--sl-guard-width) * 0.12);
  right: var(--sl-space-6);
  left: var(--sl-space-6);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sl-space-3);
  height: calc(var(--sl-guard-width) * 0.2);
}

.sl-pres-pane {
  display: grid;
  place-items: center;
  border: 1px solid var(--sl-pres-frame-border);
  border-radius: var(--sl-radius-2);
  background: linear-gradient(180deg, var(--sl-pres-inset-bg), var(--sl-pres-panel-bg));
  color: var(--sl-pres-muted-text);
  box-shadow: var(--sl-shadow-inset);
  transition: background-color var(--sl-time-slow) var(--sl-ease-out), color var(--sl-time-slow) var(--sl-ease-out);
}

.sl-pres-pane > .bi {
  font-size: var(--sl-font-micro);
}

.sl-pres-pane.sl-is-on {
  border-color: var(--sl-primary);
  background: linear-gradient(180deg, var(--sl-primary-subtle), var(--sl-pres-inset-bg));
  color: var(--sl-pres-link-text);
  box-shadow: var(--sl-pres-shadow);
}

.sl-pres-door {
  position: absolute;
  bottom: var(--sl-space-4);
  left: 50%;
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
  width: calc(var(--sl-guard-width) * 0.21);
  height: calc(var(--sl-guard-width) * 0.21);
  overflow: hidden;
  border: 1px solid var(--sl-pres-frame-border);
  border-radius: var(--sl-radius-2);
  background: linear-gradient(180deg, var(--sl-pres-inset-bg), var(--sl-pres-panel-bg));
  padding-top: var(--sl-space-3);
  color: var(--sl-pres-link-text);
  transform: translateX(-50%);
  transition: background-color var(--sl-time-slow) var(--sl-ease-out), color var(--sl-time-slow) var(--sl-ease-out);
}

.sl-pres-door > .bi {
  font-size: var(--sl-font-body);
}

.sl-pres-door > span {
  margin-bottom: var(--sl-space-2);
  font-family: var(--sl-face-mono);
  font-size: var(--sl-font-micro);
  letter-spacing: var(--sl-track-wide);
  color: var(--sl-pres-muted-text);
}

.sl-pres-door.sl-is-on {
  border-color: var(--sl-primary);
  background: linear-gradient(180deg, var(--sl-pres-inset-bg), var(--sl-pres-panel-bg));
}

.sl-pres-door.sl-is-on > span {
  color: var(--sl-pres-link-text);
}

/* A window or the door lit for a moment while a request arrives at it; it stands after the door at rest, which would repaint it otherwise */
.sl-pres-pane.sl-is-lit,
.sl-pres-door.sl-is-lit {
  background: var(--sl-primary);
  color: var(--sl-on-solid);
  box-shadow: 0 0 var(--sl-space-7) color-mix(in srgb, var(--sl-primary) var(--sl-gauge-mix), transparent);
}

/* A threat that got in while the guard was off */
.sl-pres-pane.sl-is-breach,
.sl-pres-door.sl-is-breach {
  background: var(--sl-danger);
  color: var(--sl-on-solid);
  box-shadow: 0 0 var(--sl-space-7) color-mix(in srgb, var(--sl-danger) var(--sl-gauge-mix), transparent);
}

.sl-pres-door.sl-is-lit > span,
.sl-pres-door.sl-is-breach > span {
  color: var(--sl-on-solid);
}

.sl-pres-foundation {
  position: absolute;
  right: 6px;
  bottom: 1px;
  left: 6px;
  height: var(--sl-space-1);
  background: linear-gradient(90deg, transparent, var(--sl-primary), transparent);
  opacity: var(--sl-fade-muted);
}

.sl-pres-ground {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 4px;
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  height: var(--sl-space-6);
  border-top: 1px solid var(--sl-tint-strong);
}

.sl-pres-ground > i {
  display: block;
  width: var(--sl-space-8);
  height: var(--sl-space-2);
  border-radius: var(--sl-radius-circle);
  background: var(--sl-tint);
  filter: blur(1px);
}

/* Guard console: the classifier with its counters, the traffic types and the legend */

/* The note of the classifier under its head */
.sl-pres-guard-text {
  margin: 0;
  font-size: var(--sl-font-small);
  color: var(--sl-pres-muted-text);
}

.sl-pres-guard-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(min-content, 1fr));
  gap: var(--sl-space-3);
  margin-top: var(--sl-space-4);
}

/* The three figures stand on one line whatever the height of their captions */
.sl-pres-guard-stats > .sl-pres-stat {
  display: flex;
  flex-direction: column;
  padding: var(--sl-space-3);
}

.sl-pres-guard-stats > .sl-pres-stat > b {
  margin-top: auto;
}

/* A caption of the three narrow figures wraps between its words only: the break anywhere of #content cut a word at any letter */
.sl-pres-guard-stats > .sl-pres-stat > span {
  overflow-wrap: normal;
  word-break: normal;
}

.sl-pres-guard-console .sl-pres-log {
  gap: var(--sl-space-1);
}

.sl-pres-guard-console .sl-pres-log > div {
  padding: var(--sl-space-1) 0;
}

.sl-pres-rows,
.sl-pres-log,
.sl-pres-errors,
.sl-pres-sql {
  display: grid;
  gap: var(--sl-space-2);
}

.sl-pres-row {
  display: grid;
  grid-template-columns: var(--sl-size-icon-sm) 1fr auto;
  gap: var(--sl-space-3);
  align-items: center;
  border-bottom: 1px solid var(--sl-pres-border);
  padding: var(--sl-space-2) 0;
}

.sl-pres-row:last-child {
  border-bottom: 0;
}

.sl-pres-row > .bi {
  font-size: var(--sl-font-small);
}

.sl-pres-row > span {
  font-size: var(--sl-font-small);
  color: var(--sl-pres-muted-text);
}

.sl-pres-row > b {
  font-family: var(--sl-face-mono);
  font-size: var(--sl-font-micro);
  font-weight: var(--sl-weight-medium);
  color: var(--sl-pres-text);
}

.sl-pres-log > div {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sl-space-2);
  border-bottom: 1px solid var(--sl-pres-border);
  padding: var(--sl-space-2) 0;
  font-family: var(--sl-face-mono);
  font-size: var(--sl-font-micro);
}

.sl-pres-log > div > span,
.sl-pres-sql code {
  overflow: hidden;
  color: var(--sl-pres-muted-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sl-pres-log em {
  font-style: normal;
}

.sl-pres-note {
  margin: var(--sl-space-3) 0 0;
  font-size: var(--sl-font-micro);
  line-height: var(--sl-line-normal);
  color: var(--sl-pres-muted-text);
}

/* Runtime: partials/presentation-runtime.html */
.sl-pres-speed {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sl-space-3);
}

/* The three cards of the top row share one height: the line of the response grows into what its figure leaves, the dial stands in the middle */
.sl-pres-speed > .sl-pres-card {
  display: flex;
  flex-direction: column;
}

.sl-pres-speed > .sl-pres-card > .sl-pres-spark {
  position: relative;
  flex: 1 1 auto;
  height: auto;
  min-height: calc(var(--sl-plot-min-height) / 2);
}

/* The canvas is sized from its box, so it stands out of the flow, or its own height would grow the box it is measured from */
.sl-pres-speed > .sl-pres-card > .sl-pres-spark > canvas {
  position: absolute;
  inset: 0;
}

.sl-pres-speed > .sl-pres-card > .sl-pres-rows {
  gap: var(--sl-space-3);
}

.sl-pres-speed > .sl-pres-card > .sl-pres-online {
  flex: 1 1 auto;
}

.sl-pres-big {
  font-size: var(--sl-font-hero);
  font-weight: var(--sl-weight-bold);
  line-height: 1;
  letter-spacing: var(--sl-track-tight);
  color: var(--sl-pres-text);
}

.sl-pres-big > small {
  font-size: var(--sl-font-body);
  font-weight: var(--sl-weight-medium);
  letter-spacing: 0;
  color: var(--sl-pres-muted-text);
}

.sl-pres-spark {
  height: var(--sl-plot-min-height);
  margin-top: var(--sl-space-4);
}

.sl-pres-spark canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.sl-pres-speed .sl-pres-row {
  display: flex;
  justify-content: space-between;
  border-bottom: 0;
  padding: 0;
  font-size: var(--sl-font-small);
  color: var(--sl-pres-muted-text);
}

.sl-pres-speed .sl-pres-row > b {
  font-family: inherit;
  font-size: var(--sl-font-small);
  color: var(--sl-pres-text);
}

/* The bar under a row of the database card, the bar of a debugger stat: one height, one track, one fill; nothing clips it, so the fill glows in the tone it starts with */
.sl-pres-bar {
  height: var(--sl-space-2);
  border-radius: var(--sl-radius-pill);
  background: var(--sl-pres-inset-bg);
}

.sl-pres-bar > i {
  display: block;
  width: var(--sl-d-part, 0%);
  height: 100%;
  border-radius: var(--sl-radius-pill);
  background: linear-gradient(90deg, var(--sl-pres-link-text), var(--sl-pres-good-text));
  box-shadow: 0 0 var(--sl-space-4) color-mix(in srgb, var(--sl-pres-link-text) var(--sl-gauge-mix), transparent);
  transition: width var(--sl-time-slow) var(--sl-ease-out);
}

/* PDO layer: the bus with its five stations, the console beside it */
.sl-pres-pdo {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 0.72fr);
  gap: var(--sl-space-4);
  align-items: stretch;
}

.sl-pres-pdo-stage {
  min-height: calc(var(--sl-pres-height) * 0.97);
}

.sl-pres-pdo-head {
  position: absolute;
  top: var(--sl-space-4);
  right: var(--sl-space-5);
  left: var(--sl-space-5);
  z-index: var(--sl-z-overlay);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--sl-space-4);
  align-items: center;
}

.sl-pres-pdo-head > b {
  min-width: 0;
  overflow: hidden;
  font-family: var(--sl-face-mono);
  font-size: var(--sl-font-micro);
  letter-spacing: var(--sl-track-wide);
  color: var(--sl-pres-link-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sl-pres-pdo-head > span {
  font-family: var(--sl-face-mono);
  font-size: var(--sl-font-micro);
  color: var(--sl-pres-muted-text);
  white-space: nowrap;
}

.sl-pres-pdo-head > em {
  border: 1px solid var(--sl-pres-frame-border);
  border-radius: var(--sl-radius-pill);
  background: var(--sl-pres-panel-bg);
  padding: var(--sl-space-2) var(--sl-space-3);
  font-family: var(--sl-face-mono);
  font-size: var(--sl-font-micro);
  font-style: normal;
  color: var(--sl-pres-good-text);
  white-space: nowrap;
}

.sl-pres-query {
  position: absolute;
  top: calc(var(--sl-space-11) - var(--sl-space-2));
  right: var(--sl-space-5);
  left: var(--sl-space-5);
  z-index: var(--sl-z-overlay);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--sl-space-2) var(--sl-space-3);
  align-items: center;
  border: 1px solid var(--sl-pres-frame-border);
  border-radius: var(--sl-radius-2);
  background: color-mix(in srgb, var(--sl-pres-panel-bg) var(--sl-modal-btn-mix), transparent);
  padding: var(--sl-space-2) var(--sl-space-4);
  font-family: var(--sl-face-mono);
  font-size: var(--sl-font-micro);
}

.sl-pres-query > span:first-child {
  border: 1px solid var(--sl-pres-frame-border);
  border-radius: var(--sl-radius-1);
  background: var(--sl-pres-inset-bg);
  padding: var(--sl-space-2) var(--sl-space-3);
  color: var(--sl-pres-link-text);
}

.sl-pres-query > code {
  overflow: hidden;
  color: var(--sl-pres-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sl-pres-params {
  display: flex;
  gap: var(--sl-space-2);
}

/* The bound values stand at the end of the query line as pills, the chips of the page */
.sl-pres-params > i {
  border: 1px solid var(--sl-pres-border);
  border-radius: var(--sl-radius-pill);
  background: var(--sl-pres-panel-bg);
  padding: var(--sl-space-1) var(--sl-space-3);
  white-space: nowrap;
  font-style: normal;
  color: var(--sl-pres-muted-text);
}

.sl-pres-bus {
  position: absolute;
  top: calc(var(--sl-pres-height) * 0.42);
  right: 10%;
  left: 10%;
  height: var(--sl-space-1);
  background: linear-gradient(90deg, transparent, var(--sl-primary-subtle) 7%, var(--sl-primary) 50%, var(--sl-primary-subtle) 93%, transparent);
  box-shadow: var(--sl-pres-shadow);
}

.sl-pres-bus::before,
.sl-pres-bus::after {
  content: "";
  position: absolute;
  top: -3px;
  width: var(--sl-space-3);
  height: var(--sl-space-3);
  border-radius: var(--sl-radius-circle);
  background: var(--sl-primary);
  box-shadow: var(--sl-pres-shadow);
}

.sl-pres-bus::before {
  left: 0;
}

.sl-pres-bus::after {
  right: 0;
}

/* The packet rides the bus from the module to the statement and back, at one beat each way */
/* The packet rides the top edge of the stations, so where it stops it marks a station without covering its title */
.sl-pres-packet {
  position: absolute;
  top: calc(var(--sl-pres-height) * 0.32 - var(--sl-size-icon-xs) / 2);
  left: 10%;
  z-index: var(--sl-z-dropdown);
  width: var(--sl-size-icon-xs);
  height: var(--sl-size-icon-xs);
  border: 1px solid var(--sl-pres-link-text);
  border-radius: var(--sl-radius-1);
  background: var(--sl-pres-inset-bg);
  box-shadow: var(--sl-pres-shadow);
  transform: translateX(-50%);
  animation: sl-pres-packet calc(var(--sl-pres-dur) * 2) var(--sl-ease-in-out) infinite alternate;
}

@keyframes sl-pres-packet {
  from { left: 10%; }
  to { left: 90%; }
}

/* The stage once the plugin drives it: the packet stands at --sl-d-x, and a write turns the query and the packet to warning */
.sl-pres-pdo-stage[data-sl-pres-live] .sl-pres-packet {
  left: var(--sl-d-x);
  animation: none;
  transition: left calc(var(--sl-pres-dur) * 0.15) var(--sl-ease-in-out);
}

.sl-pres-packet[data-sl-tone],
.sl-pres-query[data-sl-tone] {
  border-color: currentColor;
}

.sl-pres-pdo-stage[data-sl-pres-live] .sl-pres-bars > i {
  height: var(--sl-d-part);
  transition: height calc(var(--sl-pres-dur) * 0.15) var(--sl-ease-out);
}

.sl-pres-pdo-stage > .sl-pres-node {
  top: calc(var(--sl-pres-height) * 0.32);
  transform: translateX(-50%);
}

.sl-pres-pdo-stage > .sl-pres-node:hover {
  transform: translateX(-50%) translateY(-2px);
}

/* A station of the bus is a title and one line of caption, so the five stand at one height; a longer caption ends in an ellipsis */
.sl-pres-pdo-stage > .sl-pres-node > small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sl-pres-pdo-stage > .sl-pres-node:nth-child(1 of .sl-pres-node) { left: 10%; }
.sl-pres-pdo-stage > .sl-pres-node:nth-child(2 of .sl-pres-node) { left: 30%; }
.sl-pres-pdo-stage > .sl-pres-node:nth-child(3 of .sl-pres-node) { left: 50%; }
.sl-pres-pdo-stage > .sl-pres-node:nth-child(4 of .sl-pres-node) { left: 70%; }
.sl-pres-pdo-stage > .sl-pres-node:nth-child(5 of .sl-pres-node) { left: 90%; }

/* The result strip spans the row of stations, from the left edge of the first to the right edge of the last */
.sl-pres-return {
  position: absolute;
  top: calc(var(--sl-pres-height) * 0.63);
  right: calc(10% - var(--sl-pres-width) / 2);
  left: calc(10% - var(--sl-pres-width) / 2);
  height: calc(var(--sl-pres-height) * 0.26);
  border-top: 1px dashed var(--sl-pres-frame-border);
  border-bottom: 1px dashed var(--sl-pres-frame-border);
  background: linear-gradient(180deg, var(--sl-tint), transparent);
  padding: var(--sl-space-4);
}

.sl-pres-result {
  display: flex;
  align-items: center;
  gap: var(--sl-space-3);
  height: var(--sl-space-8);
  font-family: var(--sl-face-mono);
  font-size: var(--sl-font-micro);
  color: var(--sl-pres-muted-text);
}

.sl-pres-result > span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sl-pres-result b,
.sl-pres-flow-count > b {
  font-weight: var(--sl-weight-semibold);
  color: var(--sl-pres-text);
}

.sl-pres-result > em {
  margin-left: auto;
  font-style: normal;
  color: var(--sl-pres-link-text);
  white-space: nowrap;
}

.sl-pres-bars {
  display: flex;
  align-items: end;
  gap: var(--sl-space-2);
  height: var(--sl-space-10);
  margin: var(--sl-space-4) 0 0;
}

.sl-pres-bars > i {
  flex: 1;
  min-height: var(--sl-space-2);
  border-radius: var(--sl-radius-1) var(--sl-radius-1) 0 0;
  background: linear-gradient(180deg, var(--sl-primary), var(--sl-pres-link-text));
  opacity: var(--sl-fade-muted);
}

.sl-pres-bars > i:nth-child(1) { height: calc(100% * 0.30); }
.sl-pres-bars > i:nth-child(2) { height: calc(100% * 0.55); }
.sl-pres-bars > i:nth-child(3) { height: calc(100% * 0.76); }
.sl-pres-bars > i:nth-child(4) { height: calc(100% * 0.44); }
.sl-pres-bars > i:nth-child(5) { height: calc(100% * 0.68); }
.sl-pres-bars > i:nth-child(6) { height: calc(100% * 0.88); }
.sl-pres-bars > i:nth-child(7) { height: calc(100% * 0.57); }
.sl-pres-bars > i:nth-child(8) { height: calc(100% * 0.72); }
.sl-pres-bars > i:nth-child(9) { height: calc(100% * 0.49); }
.sl-pres-bars > i:nth-child(10) { height: calc(100% * 0.64); }

.sl-pres-console {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  overflow: hidden;
  border: 1px solid var(--sl-pres-border);
  border-radius: var(--sl-radius-3);
  background: var(--sl-pres-panel-bg);
}

.sl-pres-console-head {
  display: flex;
  align-items: center;
  gap: var(--sl-space-3);
  min-height: var(--sl-size-control);
  border-bottom: 1px solid var(--sl-pres-border);
  padding: var(--sl-space-3) var(--sl-space-4);
  font-family: var(--sl-face-mono);
  font-size: var(--sl-font-micro);
  color: var(--sl-pres-muted-text);
}

.sl-pres-console-head > .bi {
  color: var(--sl-pres-link-text);
}

.sl-pres-console-head > b {
  color: var(--sl-pres-text);
}

.sl-pres-console-head > span {
  margin-left: auto;
  color: var(--sl-pres-good-text);
}

.sl-pres-code {
  margin: 0;
  border-bottom: 1px solid var(--sl-pres-border);
  padding: var(--sl-space-4);
  font-family: var(--sl-face-mono);
  font-size: var(--sl-font-micro);
  line-height: var(--sl-line-loose);
  color: var(--sl-pres-muted-text);
  white-space: pre-wrap;
}

.sl-pres-code .sl-is-kw,
.sl-pres-code .sl-is-var {
  color: var(--sl-accent);
}

.sl-pres-code .sl-is-fn {
  color: var(--sl-pres-link-text);
}

.sl-pres-code .sl-is-str {
  color: var(--sl-pres-good-text);
}

.sl-pres-console-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sl-space-3);
  padding: var(--sl-space-3);
}

.sl-pres-console-grid .sl-pres-stat > b,
.sl-pres-dev-foot .sl-pres-stat > b {
  font-size: var(--sl-font-body);
  letter-spacing: 0;
}

.sl-pres-trace {
  display: grid;
  gap: var(--sl-space-2);
  align-content: center;
  border-top: 1px solid var(--sl-pres-border);
  padding: var(--sl-space-3) var(--sl-space-4);
  font-family: var(--sl-face-mono);
  font-size: var(--sl-font-micro);
  color: var(--sl-pres-muted-text);
}

.sl-pres-trace > div {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--sl-space-3);
}

.sl-pres-trace b {
  font-weight: var(--sl-weight-medium);
  color: var(--sl-pres-text);
}

.sl-pres-trace em {
  font-style: normal;
}

/* Debugger: its pane is .sl-pres-tab-pane, because .sl-pres-pane is a window of the guard house */
.sl-pres-devtools {
  grid-column: 1 / -1;
  overflow: hidden;
  border: 1px solid var(--sl-pres-border);
  border-radius: var(--sl-radius-3);
  background: var(--sl-pres-panel-bg);
}

/* A tab keeps its word whole: on a narrow screen the segment scrolls instead of breaking a label in two */
.sl-pres-tabs > button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.sl-pres-tab-pane {
  display: none;
  min-height: calc(var(--sl-pres-height) * 0.43);
  padding: var(--sl-space-4) 0 0;
}

/* A shown tab lays its blocks with one gap, so no two rows of a pane touch */
.sl-pres-tab-pane.sl-is-on {
  display: grid;
  align-content: start;
  gap: var(--sl-space-3);
}

.sl-pres-tab-pane > * {
  margin: 0;
}

.sl-pres-perf,
.sl-pres-pulse {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sl-space-3);
}

.sl-pres-note-row {
  display: flex;
  align-items: center;
  gap: var(--sl-space-3);
  margin-top: var(--sl-space-3);
  border: 1px solid var(--sl-pres-border);
  border-radius: var(--sl-radius-2);
  background: var(--sl-pres-ground-bg);
  padding: var(--sl-space-3);
  font-family: var(--sl-face-mono);
  font-size: var(--sl-font-micro);
  color: var(--sl-pres-muted-text);
}

.sl-pres-note-row > .bi {
  color: var(--sl-pres-link-text);
}

.sl-pres-note-row > b {
  margin-left: auto;
  font-weight: var(--sl-weight-medium);
  color: var(--sl-pres-link-text);
}

.sl-pres-errors > div {
  display: grid;
  grid-template-columns: auto auto auto minmax(0, 1fr) auto;
  gap: var(--sl-space-3);
  align-items: center;
  border: 1px solid var(--sl-proof-border);
  border-radius: var(--sl-radius-1);
  background: var(--sl-proof-bg);
  padding: var(--sl-space-2) var(--sl-space-3);
  font-family: var(--sl-face-mono);
  font-size: var(--sl-font-micro);
  color: var(--sl-pres-muted-text);
}

.sl-pres-errors .bi {
  color: var(--sl-danger);
}

.sl-pres-errors .bi[data-sl-tone="warning"] {
  color: var(--sl-pres-warn-text);
}

.sl-pres-errors .bi[data-sl-tone="info"] {
  color: var(--sl-pres-link-text);
}

.sl-pres-errors b {
  color: var(--sl-pres-text);
}

.sl-pres-errors span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sl-pres-errors em {
  font-style: normal;
  text-align: right;
}

.sl-pres-vars {
  display: grid;
  grid-template-columns: 0.55fr 1.25fr 1fr;
  gap: var(--sl-space-3);
}

.sl-pres-vars > article {
  overflow: hidden;
  border: 1px solid var(--sl-pres-border);
  border-radius: var(--sl-radius-2);
  background: var(--sl-pres-ground-bg);
}

.sl-pres-vars header {
  border-bottom: 1px solid var(--sl-pres-border);
  padding: var(--sl-space-3);
  font-family: var(--sl-face-mono);
  font-size: var(--sl-font-micro);
  color: var(--sl-pres-text);
}

.sl-pres-vars code {
  display: block;
  padding: var(--sl-space-3);
  font-family: var(--sl-face-mono);
  font-size: var(--sl-font-micro);
  line-height: var(--sl-line-loose);
  color: var(--sl-pres-muted-text);
  white-space: normal;
}

.sl-pres-sql > div {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: var(--sl-space-3);
  align-items: center;
  border-bottom: 1px solid var(--sl-pres-border);
  padding: var(--sl-space-2) var(--sl-space-3);
  font-family: var(--sl-face-mono);
  font-size: var(--sl-font-micro);
}

/* The event stream under the runtime cards: five events of one request, each with its verdict */
.sl-pres-events {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sl-space-3);
}

.sl-pres-evt {
  border: 1px solid var(--sl-pres-border);
  border-radius: var(--sl-radius-2);
  background: var(--sl-pres-panel-bg);
  padding: var(--sl-space-3);
}

.sl-pres-evt > b {
  display: block;
  margin: var(--sl-space-2) 0 var(--sl-space-1);
  font-size: var(--sl-font-small);
  color: var(--sl-pres-text);
}

.sl-pres-evt > span {
  font-size: var(--sl-font-micro);
}

/* Eight cards stand in the strip, five show; the plugin turns the strip so the hidden three take their turn */
.sl-pres-evt:nth-child(n + 6) {
  display: none;
}

/* Development: partials/presentation-dev.html */
.sl-pres-dev {
  display: grid;
  grid-template-columns: minmax(0, 1.48fr) minmax(0, 0.52fr);
  gap: var(--sl-space-4);
}

.sl-pres-dev-board {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: var(--sl-space-3);
  padding: var(--sl-space-4);
  background-image: radial-gradient(circle at 19% 50%, var(--sl-tint), transparent 60%), var(--sl-pres-bg);
  background-size: auto, 24px 24px, 24px 24px;
}

/* The commit list stands beside a rail: the line runs down the left, each row hangs on it by its own tick */
.sl-pres-commits {
  position: relative;
  display: grid;
  gap: var(--sl-space-3);
  padding-left: var(--sl-space-10);
}

.sl-pres-commits::before {
  content: "";
  position: absolute;
  top: var(--sl-space-2);
  bottom: var(--sl-space-2);
  left: var(--sl-space-6);
  width: var(--sl-space-1);
  background: linear-gradient(var(--sl-primary), var(--sl-primary-subtle) 78%, transparent);
  box-shadow: var(--sl-pres-shadow);
}

.sl-pres-commit {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--sl-space-4);
  align-items: center;
  min-height: calc(var(--sl-space-11) + var(--sl-space-6));
  border: 1px solid var(--sl-pres-border);
  border-radius: var(--sl-radius-2);
  background: color-mix(in srgb, var(--sl-pres-panel-bg) var(--sl-modal-btn-mix), transparent);
  padding: var(--sl-space-3) var(--sl-space-4);
  transition:
    transform var(--sl-time-slow) var(--sl-ease-in-out),
    border-color var(--sl-time-slow) var(--sl-ease-in-out),
    background-color var(--sl-time-slow) var(--sl-ease-in-out);
}

.sl-pres-commit::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(var(--sl-space-8) * -1);
  width: var(--sl-space-8);
  height: 1px;
  background: var(--sl-primary-subtle);
}

.sl-pres-commit::after {
  content: "";
  position: absolute;
  top: calc(50% - var(--sl-space-2));
  left: calc(var(--sl-space-8) * -1 - var(--sl-space-2));
  width: var(--sl-space-3);
  height: var(--sl-space-3);
  border: 1px solid var(--sl-primary);
  border-radius: var(--sl-radius-circle);
  background: var(--sl-pres-panel-bg);
  box-shadow: 0 0 0 var(--sl-space-2) var(--sl-pres-panel-bg);
}

.sl-pres-commit:hover,
.sl-pres-commit.sl-is-on {
  border-color: var(--sl-primary);
  background: var(--sl-pres-inset-bg);
  transform: translateX(3px);
}

.sl-pres-commit.sl-is-on::after {
  background: var(--sl-primary);
  box-shadow: 0 0 0 var(--sl-space-2) var(--sl-pres-panel-bg), var(--sl-pres-shadow);
}

.sl-pres-sha {
  min-width: calc(var(--sl-size-avatar) + var(--sl-space-10));
  border: 1px solid var(--sl-pres-frame-border);
  border-radius: var(--sl-radius-pill);
  background: var(--sl-pres-panel-bg);
  padding: var(--sl-space-1) var(--sl-space-3);
  font-family: var(--sl-face-mono);
  font-size: var(--sl-font-micro);
  color: var(--sl-pres-link-text);
  text-align: center;
}

.sl-pres-commit > div {
  min-width: 0;
}

.sl-pres-commit b {
  display: block;
  overflow: hidden;
  font-size: var(--sl-font-small);
  color: var(--sl-pres-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sl-pres-commit .sl-pres-tags {
  margin-top: var(--sl-space-2);
}

.sl-pres-when {
  text-align: right;
}

.sl-pres-when > small {
  margin-top: var(--sl-space-1);
}

.sl-pres-focus,
.sl-pres-tree {
  overflow: hidden;
  border: 1px solid var(--sl-pres-border);
  border-radius: var(--sl-radius-3);
  background: var(--sl-pres-panel-bg);
}

.sl-pres-focus-body {
  padding: var(--sl-space-4);
}

.sl-pres-focus-body > .sl-pres-mono {
  color: var(--sl-pres-link-text);
}

.sl-pres-focus-body > h3 {
  margin: var(--sl-space-2) 0 var(--sl-space-3);
  font-size: var(--sl-font-body);
  line-height: var(--sl-line-normal);
  color: var(--sl-pres-text);
}

.sl-pres-focus-body > p {
  margin: 0 0 var(--sl-space-3);
  font-size: var(--sl-font-small);
  line-height: var(--sl-line-loose);
  color: var(--sl-pres-muted-text);
}

/* The delivery pipeline: five stations on one line, a packet travelling them in order */
/* Every step is as wide as its longest word at least, so a label wraps between words and never inside one */
.sl-pres-pipe {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(min-content, 1fr));
  gap: var(--sl-space-2);
  margin-top: var(--sl-space-5);
}

.sl-pres-pipe::before {
  content: "";
  position: absolute;
  top: var(--sl-space-5);
  right: 8%;
  left: 8%;
  height: 1px;
  background: var(--sl-primary-subtle);
}

.sl-pres-pipe > div {
  position: relative;
  z-index: var(--sl-z-raised);
  text-align: center;
}

.sl-pres-pipe > div > .bi {
  display: grid;
  place-items: center;
  width: var(--sl-size-icon-md);
  height: var(--sl-size-icon-md);
  margin: auto;
  border: 1px solid var(--sl-pres-frame-border);
  border-radius: var(--sl-radius-2);
  background: var(--sl-pres-inset-bg);
  color: var(--sl-pres-link-text);
  font-size: var(--sl-font-micro);
}

.sl-pres-pipe > div > span {
  margin-top: var(--sl-space-2);
  overflow-wrap: normal;
  word-break: normal;
}

.sl-pres-pipe-packet {
  position: absolute;
  top: var(--sl-space-3);
  left: 8%;
  z-index: var(--sl-z-overlay);
  width: var(--sl-space-4);
  height: var(--sl-space-4);
  border: var(--sl-ring-width) solid var(--sl-pres-panel-bg);
  border-radius: var(--sl-radius-circle);
  background: var(--sl-pres-link-text);
  box-shadow: 0 0 0 var(--sl-space-1) var(--sl-tint-strong), 0 0 var(--sl-space-5) color-mix(in srgb, var(--sl-pres-link-text) var(--sl-gauge-mix), transparent);
  animation: sl-pres-pipe calc(var(--sl-pres-dur) * 1.5) var(--sl-ease-in-out) infinite;
}

@keyframes sl-pres-pipe {
  0%, 6% { left: 8%; opacity: 0; }
  10% { opacity: 1; }
  30% { left: 28%; }
  50% { left: 49%; }
  70% { left: 70%; }
  90% { left: 91%; opacity: 1; }
  100% { left: 91%; opacity: 0; }
}

.sl-pres-dev-foot,
.sl-pres-states {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sl-space-3);
}

/* Statistics: partials/presentation-stats.html */
.sl-pres-stats {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  gap: var(--sl-space-4);
}

.sl-pres-stats-board {
  display: grid;
  grid-template-rows: auto auto 1fr;
  background-image: radial-gradient(circle at 25% 25%, var(--sl-tint), transparent 60%), var(--sl-pres-bg);
  background-size: auto, 24px 24px, 24px 24px;
}

.sl-pres-stats-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sl-space-3);
  padding: var(--sl-space-4) 0;
}

.sl-pres-hours {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--sl-space-3);
  min-height: calc(var(--sl-plot-height) + var(--sl-space-10));
  border: 1px solid var(--sl-pres-border);
  border-radius: var(--sl-radius-2);
  background: color-mix(in srgb, var(--sl-pres-panel-bg) var(--sl-fav-mix), transparent);
  padding: var(--sl-space-4);
}

.sl-pres-hours-axis {
  display: flex;
  justify-content: space-between;
  font-family: var(--sl-face-mono);
  font-size: var(--sl-font-micro);
  color: var(--sl-pres-muted-text);
}

.sl-pres-hours-bars {
  display: grid;
  grid-template-columns: repeat(24, 1fr);
  gap: var(--sl-space-2);
  align-items: end;
  min-height: calc(var(--sl-plot-height) / 2);
}

/* Every bar stands at its share of the busiest hour and breathes at its own delay, read from its place in the row */
.sl-pres-hours-bars > i {
  display: block;
  height: var(--sl-d-part, 0%);
  min-height: 1px;
  border-radius: var(--sl-radius-1) var(--sl-radius-1) 0 0;
  background: linear-gradient(180deg, var(--sl-primary), var(--sl-pres-link-text));
  opacity: var(--sl-fade-subtle);
  transform-origin: bottom;
  animation: sl-pres-hour var(--sl-pres-dur) var(--sl-ease-in-out) infinite alternate;
}

.sl-pres-hours-bars > i:nth-child(3n + 1) { animation-delay: calc(var(--sl-pres-dur) * -0.3); }
.sl-pres-hours-bars > i:nth-child(3n + 2) { animation-delay: calc(var(--sl-pres-dur) * -0.6); }
.sl-pres-hours-bars > i:nth-child(4n + 3) { animation-delay: calc(var(--sl-pres-dur) * -0.9); }

@keyframes sl-pres-hour {
  to { opacity: var(--sl-fade-muted); transform: scaleY(0.91); }
}

.sl-pres-claim {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--sl-pres-border);
  border-radius: var(--sl-radius-3);
  background: var(--sl-pres-panel-bg);
  padding: var(--sl-space-5);
}

.sl-pres-claim > .sl-pres-over {
  color: var(--sl-pres-link-text);
}

.sl-pres-claim > h3 {
  margin: var(--sl-space-2) 0 var(--sl-space-3);
  font-size: var(--sl-font-h3);
  line-height: var(--sl-line-tight);
  color: var(--sl-pres-text);
}

.sl-pres-claim > p {
  margin: 0;
  font-size: var(--sl-font-micro);
  line-height: var(--sl-line-loose);
  color: var(--sl-pres-muted-text);
}

/* Six dials under the claim, the faces of the cockpit at the width three of them share */
.sl-pres-rings {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sl-space-4) var(--sl-space-5);
  border: 1px solid var(--sl-pres-border);
  border-radius: var(--sl-radius-3);
  background: var(--sl-pres-panel-bg);
  padding: var(--sl-space-4);
}

/* A dial smaller than the cockpit keeps its figure a step smaller, so a three-digit value stays inside the scale */
.sl-pres-dials > .sl-pres-ring > div > b {
  font-size: var(--sl-font-h1);
}

/* The online card of the telemetry: the dial of the cockpit on the left, the split by kind on the right */
.sl-pres-online {
  display: grid;
  grid-template-columns: calc(var(--sl-gauge-width) * 0.85) minmax(0, 1fr);
  gap: var(--sl-space-6);
  align-items: center;
}

.sl-pres-vitals > .sl-pres-note,
.sl-pres-stats-side > .sl-pres-note,
.sl-pres-arch-side > .sl-pres-note {
  align-self: stretch;
  margin: 0;
  border: 1px dashed var(--sl-pres-frame-border);
  border-radius: var(--sl-radius-2);
  padding: var(--sl-space-3) var(--sl-space-4);
  text-align: left;
}

/* Pipeline: partials/presentation-pipeline.html */
.sl-pres-arch {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.55fr);
  gap: var(--sl-space-4);
}

.sl-pres-flow {
  min-height: calc(var(--sl-pres-height) * 1.4);
  background-image: radial-gradient(circle at 50% 51.7%, var(--sl-tint), transparent 31%), var(--sl-pres-bg);
  background-size: auto, 24px 24px, 24px 24px;
}

.sl-pres-flow-top {
  position: absolute;
  top: var(--sl-space-4);
  right: var(--sl-space-5);
  left: var(--sl-space-5);
  z-index: var(--sl-z-dropdown);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sl-space-3);
}

.sl-pres-flow-top > .sl-pres-mono {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The ring covers the whole scene, so its drawing units and the percent places of the stations are one grid */
#content .sl-pres-paths {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.sl-pres-path-ring {
  fill: none;
  stroke: var(--sl-pres-frame-border);
  stroke-width: 1.2;
  stroke-dasharray: 3 8;
}

.sl-pres-path-live {
  fill: none;
  stroke: var(--sl-primary-subtle);
  stroke-width: 1.5;
  stroke-dasharray: 5 9;
  opacity: var(--sl-fade-subtle);
  transition: opacity var(--sl-time-slow) var(--sl-ease-out);
}

.sl-pres-path-packet {
  fill: var(--sl-pres-text);
  stroke: var(--sl-primary);
  stroke-width: 1;
}

.sl-pres-flow-core {
  position: absolute;
  top: 51.7%;
  left: 50%;
  z-index: var(--sl-z-overlay);
  display: grid;
  place-items: center;
  width: calc(var(--sl-pres-width) * 1.25);
  height: calc(var(--sl-pres-width) * 1.25);
  border: 1px solid var(--sl-pres-link-text);
  border-radius: var(--sl-radius-circle);
  background: radial-gradient(circle at 50% 38%, var(--sl-pres-core-bg), var(--sl-pres-panel-bg) 64%);
  text-align: center;
  transform: translate(-50%, -44%);
}

.sl-pres-flow-core::before,
.sl-pres-flow-core::after {
  content: "";
  position: absolute;
  inset: -13px;
  border: 1px solid var(--sl-tint-strong);
  border-radius: var(--sl-radius-circle);
  box-shadow: var(--sl-pres-shadow);
}

.sl-pres-flow-core::after {
  inset: -27px;
  border-style: dashed;
  animation: sl-pres-spin calc(var(--sl-pres-dur) * 5) linear infinite;
}

.sl-pres-flow-core img,
.sl-pres-router > img {
  width: calc(var(--sl-pres-width) * 0.65);
  height: auto;
  margin: 0 auto var(--sl-space-2);
}

.sl-pres-flow-core > div {
  max-width: 100%;
  padding: var(--sl-space-3);
}

.sl-pres-flow-core b {
  display: block;
  font-family: var(--sl-face-mono);
  font-size: var(--sl-font-micro);
  letter-spacing: var(--sl-track-wide);
  color: var(--sl-pres-text);
}

.sl-pres-flow-core small {
  margin-top: var(--sl-space-2);
}

.sl-pres-flow-core > div > .sl-pres-pill {
  margin-top: var(--sl-space-3);
  white-space: normal;
}

/* A station hint is one line, its two parts joined by a dot, and a longer translation ends in an ellipsis */
.sl-pres-flow > .sl-pres-node small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sl-pres-flow > .sl-pres-node small > span + span::before {
  content: " · ";
}

/* The fork of the cache node: the outcome of each request rises over node 05 in its tone and fades, on transform and opacity alone */
.sl-pres-flow-pop {
  position: absolute;
  bottom: 100%;
  left: 50%;
  z-index: var(--sl-z-overlay);
  border: 1px solid currentColor;
  border-radius: var(--sl-radius-pill);
  background: var(--sl-pres-panel-bg);
  padding: var(--sl-space-1) var(--sl-space-3);
  font-family: var(--sl-face-mono);
  font-size: var(--sl-font-micro);
  font-style: normal;
  letter-spacing: var(--sl-track-wide);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-50%);
  pointer-events: none;
}

.sl-pres-flow-pop.sl-is-pop {
  animation: sl-pres-rise calc(var(--sl-pres-dur) * 0.4) var(--sl-ease-out);
}

@keyframes sl-pres-rise {
  from { opacity: 0; transform: translate(-50%, var(--sl-space-3)); }
  20% { opacity: 1; transform: translate(-50%, 0); }
  70% { opacity: 1; }
  to { opacity: 0; transform: translate(-50%, calc(var(--sl-space-8) * -1)); }
}

/* The seven stations sit as a heptagon on the ring, the request on the axis, the margin over it equal to the margin under the lowest pair */
.sl-pres-flow > .sl-pres-node {
  width: calc(var(--sl-pres-width) * 1.2);
  transform: translate(-50%, -50%);
}

.sl-pres-flow > .sl-pres-node:is(.sl-is-on, :hover) {
  transform: translate(-50%, calc(-50% - 2px));
}

.sl-pres-flow > .sl-pres-node:nth-child(1 of .sl-pres-node) { top: 17.7%; left: 50%; }
.sl-pres-flow > .sl-pres-node:nth-child(2 of .sl-pres-node) { top: 30.5%; left: 81.3%; }
.sl-pres-flow > .sl-pres-node:nth-child(3 of .sl-pres-node) { top: 59.3%; left: 89%; }
.sl-pres-flow > .sl-pres-node:nth-child(4 of .sl-pres-node) { top: 82.3%; left: 67.4%; }
.sl-pres-flow > .sl-pres-node:nth-child(5 of .sl-pres-node) { top: 82.3%; left: 32.6%; }
.sl-pres-flow > .sl-pres-node:nth-child(6 of .sl-pres-node) { top: 59.3%; left: 11%; }
.sl-pres-flow > .sl-pres-node:nth-child(7 of .sl-pres-node) { top: 30.5%; left: 18.7%; }

.sl-pres-flow[data-sl-mode="off"] > .sl-pres-node:nth-child(5 of .sl-pres-node),
.sl-pres-flow[data-sl-mode="bypass"] > .sl-pres-node:nth-child(5 of .sl-pres-node) {
  opacity: var(--sl-fade-disabled);
}

/* With the cache switched off the station of the cache is struck out: the path no longer has it */
.sl-pres-flow[data-sl-mode="off"] > .sl-pres-node:nth-child(5 of .sl-pres-node) {
  border-style: dashed;
}

.sl-pres-flow[data-sl-mode="off"] > .sl-pres-node:nth-child(5 of .sl-pres-node) small {
  text-decoration: line-through;
}

/* The module while the parser reads the text again, and the tally of the scene over the path */
.sl-pres-flow > .sl-pres-node.sl-is-busy small > span:last-child {
  color: var(--sl-pres-warn-text);
}

.sl-pres-flow-count {
  font-family: var(--sl-face-mono);
  font-size: var(--sl-font-micro);
  white-space: nowrap;
  color: var(--sl-pres-muted-text);
}

.sl-pres-arch-side {
  display: grid;
  gap: var(--sl-space-4);
  align-content: start;
}

.sl-pres-case {
  display: grid;
  grid-template-columns: var(--sl-size-icon-xl) 1fr;
  gap: var(--sl-space-3);
  border-bottom: 1px solid var(--sl-pres-border);
  padding: var(--sl-space-4);
  transition: background-color var(--sl-time-slow) var(--sl-ease-out);
}

.sl-pres-case:last-child {
  border-bottom: 0;
}

.sl-pres-case > span {
  font-size: var(--sl-font-micro);
  line-height: var(--sl-line-normal);
  color: var(--sl-pres-muted-text);
}

.sl-pres-case.sl-is-on {
  background: var(--sl-pres-inset-bg);
}

.sl-pres-case.sl-is-on > strong {
  color: var(--sl-pres-text);
}

.sl-pres-case.sl-is-on[data-sl-tone] > strong {
  color: currentColor;
}

.sl-pres-states > .sl-pres-stat > b {
  font-size: var(--sl-font-small);
  letter-spacing: 0;
  white-space: normal;
}

/* An odd last card of the store states spans the row, so the grid closes without a hole */
.sl-pres-states > .sl-pres-stat:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.sl-pres-arch-side > .sl-pres-note b {
  color: var(--sl-pres-text);
}

/* DNA: partials/presentation-dna.html; the band picture wears the film of every picture, and a light crosses it under the pointer */
.sl-pres-dna {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sl-space-6);
}

.sl-pres-principle {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--sl-pres-border);
  border-radius: var(--sl-radius-3);
  background: var(--sl-pres-panel-bg);
  transition: border-color var(--sl-time-slow) var(--sl-ease-out), box-shadow var(--sl-time-slow) var(--sl-ease-out);
}

.sl-pres-principle > img {
  width: 100%;
  height: auto;
  aspect-ratio: 1920 / 440;
  object-fit: cover;
}

.sl-pres-principle::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: var(--sl-z-raised);
  width: 100%;
  aspect-ratio: 1920 / 440;
  background: linear-gradient(115deg, transparent, var(--sl-tint-strong), transparent) -80% 50% / 45% 100% no-repeat;
  opacity: 0;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .sl-pres-principle:hover {
    border-color: var(--sl-primary-subtle);
    box-shadow: var(--sl-shadow-raised);
  }

  .sl-pres-principle:hover::before {
    animation: sl-pres-light calc(var(--sl-pres-dur) * 0.3) var(--sl-ease-out) both;
  }
}

@keyframes sl-pres-light {
  0% { background-position: -80% 50%; opacity: 0; }
  20%, 70% { opacity: 1; }
  100% { background-position: 180% 50%; opacity: 0; }
}

.sl-pres-principle-copy {
  padding: var(--sl-space-7);
}

.sl-pres-principle-copy > header {
  display: flex;
  align-items: center;
  gap: var(--sl-space-5);
  margin-bottom: var(--sl-space-6);
}

.sl-pres-principle-copy > header > .bi {
  color: var(--sl-pres-link-text);
}

.sl-pres-principle-copy h3 {
  margin: 0;
  font-size: var(--sl-font-h2);
  line-height: var(--sl-line-tight);
  color: var(--sl-pres-text);
}

.sl-pres-principle-copy p {
  margin: 0 0 var(--sl-space-5);
  font-size: var(--sl-font-body);
  line-height: var(--sl-line-loose);
  color: var(--sl-pres-muted-text);
}

.sl-pres-principle-copy p:last-child {
  margin-bottom: 0;
}

/* Gallery: partials/presentation-archive.html and presentation-sites.html, one picture treatment with the principles */
.sl-pres-tile-open::before,
.sl-pres-shot::before,
.sl-pres-principle::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--sl-z-raised);
  background: linear-gradient(var(--sl-pres-photo-bg), var(--sl-pres-photo-bg)), var(--sl-tint);
  transition: opacity var(--sl-time-slow) var(--sl-ease-out);
  pointer-events: none;
}

.sl-pres-principle::after {
  bottom: auto;
  aspect-ratio: 1920 / 440;
}

.sl-pres-tile-open > img,
.sl-pres-shot > img,
.sl-pres-principle > img {
  filter: grayscale(0.35) saturate(0.75) contrast(1.02) brightness(0.85);
  transition: transform var(--sl-time-slow) var(--sl-ease-out), filter var(--sl-time-slow) var(--sl-ease-out);
}

.sl-pres-tile:hover .sl-pres-tile-open::before,
.sl-pres-tile:hover .sl-pres-shot::before,
.sl-pres-principle:hover::after {
  opacity: 0;
}

.sl-pres-tile:hover .sl-pres-tile-open > img,
.sl-pres-tile:hover .sl-pres-shot > img,
.sl-pres-principle:hover > img {
  filter: saturate(1) brightness(0.98);
  transform: scale(1.03);
}

.sl-pres-gallery {
  min-width: 0;
}

.sl-pres-gallery-head {
  display: flex;
  justify-content: space-between;
  gap: var(--sl-space-5);
  margin-bottom: var(--sl-space-6);
  color: var(--sl-pres-muted-text);
}

/* The site strip: a row of cards four to the view, snapping by card, the range under it is the position control */
.sl-pres-gallery-track {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3 * var(--sl-space-5)) / 4);
  gap: var(--sl-space-5);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.sl-pres-gallery-track::-webkit-scrollbar {
  display: none;
}

.sl-pres-tile {
  position: relative;
  isolation: isolate;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--sl-pres-border);
  border-radius: var(--sl-radius-3);
  background: var(--sl-pres-panel-bg);
  scroll-snap-align: start;
}

.sl-pres-tile-open,
.sl-pres-shot {
  position: relative;
  display: block;
  height: var(--sl-site-height);
  margin: 0;
  overflow: hidden;
  background: var(--sl-pres-inset-bg);
}

#content .sl-pres-tile-open > img,
#content .sl-pres-shot > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* Logotypes and partner badges are artwork on a clear ground: they sit inside the tile instead of being cropped to it */
.sl-pres-tile[data-sl-pres-fit="contain"] .sl-pres-tile-open > img {
  object-fit: contain;
  padding: var(--sl-space-6);
}

/* Open and download stand on the picture, faint until the card is pointed at or a tool is focused */
.sl-pres-tile-tools {
  position: absolute;
  top: var(--sl-space-4);
  right: var(--sl-space-4);
  z-index: var(--sl-z-overlay);
  display: flex;
  gap: var(--sl-space-2);
  opacity: var(--sl-fade-muted);
  transition: opacity var(--sl-time-slow) var(--sl-ease-out);
}

.sl-pres-tile:hover .sl-pres-tile-tools,
.sl-pres-tile-tools:focus-within {
  opacity: 1;
}

.sl-pres-tile-tools > button,
.sl-pres-tile-tools > a,
.sl-pres-gallery-controls > button {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: var(--sl-size-control);
  height: var(--sl-size-control);
  border: 1px solid var(--sl-pres-frame-border);
  border-radius: var(--sl-radius-2);
  padding: 0;
  background: color-mix(in srgb, var(--sl-pres-panel-bg) var(--sl-fav-mix), transparent);
  color: var(--sl-pres-link-text);
  cursor: pointer;
  backdrop-filter: blur(var(--sl-space-3));
}

.sl-pres-tile-tools > button:hover,
.sl-pres-tile-tools > a:hover,
.sl-pres-gallery-controls > button:hover {
  border-color: var(--sl-primary);
  background: var(--sl-tint);
}

/* The site rating is the thumbnail weight in twenty-byte steps, as the old main module counted it */
.sl-pres-rate {
  position: absolute;
  top: var(--sl-space-4);
  right: var(--sl-space-4);
  z-index: var(--sl-z-overlay);
  display: inline-flex;
  align-items: center;
  gap: var(--sl-space-2);
  border: 1px solid var(--sl-pres-border);
  border-radius: var(--sl-radius-pill);
  background: var(--sl-pres-panel-bg);
  padding: var(--sl-space-1) var(--sl-space-4);
  color: var(--sl-pres-text);
  font-size: var(--sl-font-small);
  font-weight: var(--sl-weight-medium);
}

/* The caption lies on the picture over the shade that darkens the picture towards it */
.sl-pres-tile-copy {
  position: absolute;
  inset: 0;
  z-index: var(--sl-z-raised);
  display: grid;
  align-content: end;
  background: var(--sl-grad-caption);
  padding: var(--sl-space-6);
  pointer-events: none;
}

.sl-pres-tile-copy > small {
  font-size: var(--sl-font-micro);
  color: var(--sl-pres-link-text);
}

.sl-pres-tile-copy > h3 {
  margin: var(--sl-space-2) 0 0;
  font-size: var(--sl-font-h3);
  color: var(--sl-pres-text);
  overflow-wrap: anywhere;
}

.sl-pres-gallery-controls {
  display: flex;
  align-items: center;
  gap: var(--sl-space-5);
  margin-top: var(--sl-space-5);
}

.sl-pres-gallery-controls > output {
  min-width: var(--sl-cab-act-width);
  font-size: var(--sl-font-small);
  color: var(--sl-pres-muted-text);
  text-align: center;
}

.sl-pres-gallery-controls > input {
  flex: 1;
  min-width: 0;
  background: transparent;
  cursor: pointer;
  accent-color: var(--sl-primary);
  appearance: none;
}

.sl-pres-gallery-controls > input::-webkit-slider-runnable-track {
  height: var(--sl-space-2);
  border-radius: var(--sl-radius-pill);
  background: var(--sl-pres-border);
}

.sl-pres-gallery-controls > input::-moz-range-track {
  height: var(--sl-space-2);
  border-radius: var(--sl-radius-pill);
  background: var(--sl-pres-border);
}

.sl-pres-gallery-controls > input::-webkit-slider-thumb {
  width: var(--sl-space-6);
  height: var(--sl-space-6);
  margin-top: calc(-1 * var(--sl-space-5) / 2);
  border-radius: var(--sl-radius-circle);
  background: var(--sl-primary);
  appearance: none;
}

.sl-pres-gallery-controls > input::-moz-range-thumb {
  width: var(--sl-space-6);
  height: var(--sl-space-6);
  border: 0;
  border-radius: var(--sl-radius-circle);
  background: var(--sl-primary);
}

/* The brand archive: the featured material takes the left column, the next four fill a two-by-two grid */
.sl-pres-gallery[data-sl-pres="brand"] .sl-pres-gallery-track {
  grid-auto-flow: row;
  grid-auto-columns: auto;
  grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 0.65fr));
  grid-template-rows: repeat(2, var(--sl-brand-height));
  overflow: visible;
  scroll-snap-type: none;
}

.sl-pres-gallery[data-sl-pres="brand"] .sl-pres-tile {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
}

.sl-pres-gallery[data-sl-pres="brand"] .sl-pres-tile[hidden] {
  display: none;
}

.sl-pres-tile[data-sl-pres-feature] {
  grid-row: 1 / span 2;
  grid-column: 1;
}

.sl-pres-gallery[data-sl-pres="brand"] .sl-pres-tile-open {
  height: 100%;
  min-height: 0;
}

.sl-pres-gallery[data-sl-pres="brand"] .sl-pres-tile-copy {
  padding: var(--sl-space-5);
}

.sl-pres-gallery[data-sl-pres="brand"] .sl-pres-tile-copy > h3 {
  font-size: var(--sl-font-body);
}

.sl-pres-tile[data-sl-pres-feature] .sl-pres-tile-copy {
  padding: var(--sl-space-7);
}

.sl-pres-tile[data-sl-pres-feature] .sl-pres-tile-copy > h3 {
  font-size: var(--sl-font-h2);
}

/* Voices: partials/presentation-voices.html */
.sl-pres-voices {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--sl-pres-border);
  border-radius: var(--sl-radius-3);
  background-color: var(--sl-pres-panel-bg);
  background-image: radial-gradient(circle at 85% 0, var(--sl-tint), transparent 40%), var(--sl-pres-bg);
  background-size: auto, 24px 24px, 24px 24px;
}

.sl-pres-voices-track {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sl-space-3);
  padding: var(--sl-space-4);
}

/* Two frames at most: a board or a panel that only groups its cards draws no frame and no ground */
.sl-pres-blocks,
.sl-pres-devtools,
.sl-pres-dev-board,
.sl-pres-stats-board,
.sl-pres-voices {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.sl-pres-dev-board,
.sl-pres-stats-board {
  padding: 0;
}

.sl-pres-voices-track {
  padding-inline: 0;
  padding-bottom: 0;
}

.sl-pres-voice {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--sl-pres-border);
  border-radius: var(--sl-radius-2);
  background: var(--sl-pres-panel-bg);
  padding: var(--sl-space-5);
  color: var(--sl-pres-text);
  transition: transform var(--sl-time-slow) var(--sl-ease-in-out), border-color var(--sl-time-slow) var(--sl-ease-in-out), box-shadow var(--sl-time-slow) var(--sl-ease-in-out);
}

/* The ornament quotation mark behind the words, and the hairline of the tone across the top */
.sl-pres-voice::before {
  content: "\201C";
  position: absolute;
  top: -14px;
  right: var(--sl-space-5);
  font-family: var(--sl-face-quote);
  font-size: 80px;
  line-height: 1;
  color: color-mix(in srgb, currentColor var(--sl-quote-mix), transparent);
}

.sl-pres-voice::after,
.sl-pres-pulse-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: var(--sl-space-1);
  background: linear-gradient(90deg, transparent, currentColor, transparent);
  opacity: var(--sl-fade-subtle);
}

.sl-pres-voice:hover {
  border-color: color-mix(in srgb, currentColor var(--sl-tile-mix), var(--sl-pres-border));
  box-shadow: var(--sl-shadow-float);
  transform: translateY(-4px);
}

.sl-pres-voice > p {
  position: relative;
  z-index: var(--sl-z-raised);
  min-height: calc(var(--sl-pres-min-height) / 2);
  margin: 0;
  font-size: var(--sl-font-small);
  line-height: var(--sl-line-loose);
  color: var(--sl-pres-text);
}

.sl-pres-voice-sep {
  display: block;
  height: 1px;
  margin: var(--sl-space-4) 0;
  background: linear-gradient(90deg, currentColor, transparent);
  opacity: var(--sl-fade-disabled);
}

.sl-pres-voice-person {
  display: grid;
  grid-template-columns: var(--sl-size-control) 1fr auto;
  gap: var(--sl-space-3);
  align-items: center;
  transition: transform var(--sl-time-slow) var(--sl-ease-in-out);
}

.sl-pres-voice-ava {
  display: grid;
  place-items: center;
  width: var(--sl-size-control);
  height: var(--sl-size-control);
  border: 1px solid var(--sl-ico-border);
  border-radius: var(--sl-radius-circle);
  background: var(--sl-ico-bg);
  font-family: var(--sl-face-mono);
  font-size: var(--sl-font-micro);
}

.sl-pres-voice-person strong {
  display: block;
  font-size: var(--sl-font-micro);
  color: var(--sl-pres-text);
}

.sl-pres-voice-person small {
  margin-top: var(--sl-space-1);
}

.sl-pres-since {
  display: flex;
  align-items: baseline;
  gap: var(--sl-space-2);
  white-space: nowrap;
}

.sl-pres-since > b {
  display: block;
  font-family: var(--sl-face-mono);
  font-size: var(--sl-font-micro);
  color: var(--sl-pres-link-text);
}

/* The marks rise from under the card while the person line makes room for them */
.sl-pres-voice-marks {
  position: absolute;
  right: var(--sl-space-4);
  bottom: var(--sl-space-3);
  left: var(--sl-space-4);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sl-space-2);
  opacity: 0;
  transform: translateY(var(--sl-space-6));
  transition: transform var(--sl-time-slow) var(--sl-ease-in-out), opacity var(--sl-time-slow) var(--sl-ease-in-out);
}

.sl-pres-voice:hover .sl-pres-voice-marks {
  opacity: 1;
  transform: none;
}

/* The avatar greets the pointer with one small bounce */
.sl-pres-voice:hover .sl-pres-voice-ava {
  animation: sl-pres-pop var(--sl-time-slow) var(--sl-ease-out);
}

@keyframes sl-pres-pop {
  from { transform: scale(0.94); }
  50% { transform: scale(1.08); }
  to { transform: none; }
}

.sl-pres-voice:hover .sl-pres-voice-person {
  transform: translateY(calc(var(--sl-space-9) * -1));
}

.sl-pres-voice-marks > span {
  overflow: hidden;
  border: 1px solid var(--sl-pres-border);
  border-radius: var(--sl-radius-pill);
  background: var(--sl-pres-ground-bg);
  padding: var(--sl-space-1) var(--sl-space-3);
  font-family: var(--sl-face-mono);
  font-size: var(--sl-font-micro);
  color: var(--sl-pres-muted-text);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sl-pres-voice-marks .bi {
  margin-right: var(--sl-space-2);
  color: currentColor;
}

/* Pulse: partials/presentation-pulse.html */

.sl-pres-pulse-card {
  position: relative;
  min-height: var(--sl-pres-min-height);
  overflow: hidden;
  border: 1px solid var(--sl-pres-border);
  border-radius: var(--sl-radius-3);
  background: linear-gradient(180deg, var(--sl-pres-panel-bg), var(--sl-pres-ground-bg));
  padding-bottom: var(--sl-space-5);
  transition: transform var(--sl-time-slow) var(--sl-ease-in-out), border-color var(--sl-time-slow) var(--sl-ease-in-out), box-shadow var(--sl-time-slow) var(--sl-ease-in-out);
}

.sl-pres-pulse-card:hover {
  border-color: color-mix(in srgb, currentColor var(--sl-tile-mix), var(--sl-pres-border));
  box-shadow: var(--sl-shadow-float);
  transform: translateY(-3px);
}

.sl-pres-pulse-head {
  display: flex;
  align-items: center;
  gap: var(--sl-space-3);
  border-bottom: 1px solid var(--sl-pres-border);
  padding: var(--sl-space-4);
}

.sl-pres-pulse-head > span {
  display: grid;
  flex: 0 0 var(--sl-size-control);
  place-items: center;
  width: var(--sl-size-control);
  height: var(--sl-size-control);
  border: 1px solid var(--sl-ico-border);
  border-radius: var(--sl-radius-2);
  background: var(--sl-ico-bg);
  font-size: var(--sl-font-small);
}

.sl-pres-pulse-head > div {
  min-width: 0;
}

.sl-pres-pulse-head b {
  display: block;
  font-size: var(--sl-font-small);
  color: var(--sl-pres-text);
}

.sl-pres-pulse-head div > span {
  display: block;
  font-family: var(--sl-face-mono);
  font-size: var(--sl-font-micro);
  letter-spacing: var(--sl-track-wide);
  color: var(--sl-pres-muted-text);
}

.sl-pres-pulse-body {
  padding: var(--sl-space-4);
}

.sl-pres-pulse-body > h3 {
  margin: var(--sl-space-2) 0 var(--sl-space-3);
  font-size: var(--sl-font-small);
  line-height: var(--sl-line-normal);
  color: var(--sl-pres-text);
}

.sl-pres-pulse-body > p {
  margin: 0;
  font-size: var(--sl-font-micro);
  line-height: var(--sl-line-normal);
  color: var(--sl-pres-muted-text);
}

.sl-pres-pulse-foot {
  position: absolute;
  right: var(--sl-space-4);
  bottom: var(--sl-space-3);
  left: var(--sl-space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--sl-face-mono);
  font-size: var(--sl-font-micro);
  color: var(--sl-pres-muted-text);
}

.sl-pres-pulse-foot .sl-pres-dot {
  width: var(--sl-space-2);
  height: var(--sl-space-2);
}

.sl-pres-pulse-foot > a {
  color: var(--sl-pres-link-text);
}

.sl-pres-pulse-foot > a:hover {
  color: var(--sl-pres-text);
}

/* Ladder: the narrower steps */
@media (max-width: 1200px) {
  .sl-pres-hero-grid,
  .sl-pres-modules,
  .sl-pres-dev,
  .sl-pres-stats,
  .sl-pres-arch,
  .sl-pres-blocks-layout,
  .sl-pres-pdo {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Alone in its row the lead keeps a reading measure; beside the panel it fills its column */
  .sl-pres-lead {
    max-width: var(--sl-view-max-width);
  }

  .sl-pres-facts,
  .sl-pres-tech {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sl-pres-rail {
    grid-template-columns: minmax(0, 1fr);
  }

  .sl-pres-rail-head {
    display: none;
  }

  .sl-pres-dev-side {
    grid-template-columns: 1fr 1fr;
  }

  .sl-pres-focus {
    grid-row: span 2;
  }

  .sl-pres-pulse {
    grid-template-columns: repeat(2, 1fr);
  }

  .sl-pres-stats-side {
    grid-template-columns: 1fr 1fr;
  }

  .sl-pres-stats-side > .sl-pres-note {
    grid-column: 1 / -1;
  }

  .sl-pres-speed {
    grid-template-columns: 1fr 1fr;
  }

  .sl-pres-speed > .sl-pres-card:first-child {
    grid-column: 1 / -1;
  }

  .sl-pres-events {
    grid-template-columns: repeat(3, 1fr);
  }

  .sl-pres-detail {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Under the stage the layout list takes two columns and the rules close it at full width */
  .sl-pres-blocks-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sl-pres-guard {
    grid-template-columns: minmax(0, 1fr);
  }

  .sl-pres-guard-console {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 900px) {
  .sl-pres-rhythm {
    grid-template-columns: minmax(0, 1fr);
  }

  .sl-pres-chart {
    grid-column: auto;
  }

  .sl-pres-gallery[data-sl-pres="sites"] .sl-pres-gallery-track {
    grid-auto-columns: calc((100% - var(--sl-space-5)) / 2);
  }

  .sl-pres-voices-track {
    grid-template-columns: minmax(0, 1fr);
  }

  .sl-pres-tabs {
    max-width: 100%;
    overflow: auto;
  }

  .sl-pres-perf {
    grid-template-columns: 1fr 1fr;
  }

  .sl-pres-vars {
    grid-template-columns: minmax(0, 1fr);
  }

  .sl-pres-errors > div {
    grid-template-columns: auto auto minmax(0, 1fr);
  }

  .sl-pres-errors span {
    grid-column: 3;
  }

  .sl-pres-errors em {
    display: none;
  }

  .sl-pres-guard-console {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 768px) {
  .sl-pres-gauges {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-items: center;
    gap: var(--sl-space-6);
    max-width: calc(var(--sl-gauge-width) * 2 + var(--sl-space-6));
    margin-inline: auto;
  }

  .sl-cockpit-plate {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .sl-pres .sl-pres-gauges > .sl-pres-ring {
    max-width: var(--sl-gauge-width);
  }

  .sl-pres-hero {
    padding: var(--sl-space-7) var(--sl-space-6);
  }

  .sl-pres-copy > h1 {
    font-size: var(--sl-font-display);
  }

  .sl-pres-facts,
  .sl-pres-tech,
  .sl-pres-events,
  .sl-pres-detail,
  .sl-pres-stats-grid,
  .sl-pres-speed {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sl-pres-dna,
  .sl-pres-dev-side,
  .sl-pres-stats-side,
  .sl-pres-pulse {
    grid-template-columns: minmax(0, 1fr);
  }

  .sl-pres-focus {
    grid-row: auto;
  }

  .sl-pres-principle-copy {
    padding: var(--sl-space-6);
  }

  .sl-pres-head > p {
    flex-basis: 100%;
    margin: 0;
  }

  .sl-pres-commit {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .sl-pres-when {
    display: none;
  }

  .sl-pres-gallery[data-sl-pres="brand"] .sl-pres-gallery-track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: calc(var(--sl-brand-height) * 1.5) repeat(2, calc(var(--sl-brand-height) * 0.9));
  }

  .sl-pres-tile[data-sl-pres-feature] {
    grid-row: 1;
    grid-column: 1 / -1;
  }

  /* The scenes fold: the nodes leave their absolute places and stand in a grid, the wiring and the bus are hidden */
  .sl-pres-map,
  .sl-pres-blocks-stage,
  .sl-pres-pdo-stage,
  .sl-pres-flow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sl-space-4);
    min-height: 0;
    padding: var(--sl-space-4);
  }

  .sl-pres-flow {
    padding-top: var(--sl-space-11);
  }

  #content .sl-pres-map > .sl-pres-mod,
  #content .sl-pres-blocks-stage > .sl-pres-node,
  #content .sl-pres-pdo-stage > .sl-pres-node,
  #content .sl-pres-flow > .sl-pres-node {
    position: relative;
    inset: auto;
    width: auto;
    min-width: 0;
    transform: none;
  }

  .sl-pres-map-core,
  .sl-pres-page,
  .sl-pres-router,
  .sl-pres-flow-core {
    position: relative;
    inset: auto;
    grid-column: 1 / -1;
    justify-self: center;
    margin: var(--sl-space-5);
    transform: none;
  }

  .sl-pres-wires,
  .sl-pres-paths,
  .sl-pres-bus,
  .sl-pres-packet {
    display: none;
  }

  .sl-pres-return {
    position: relative;
    inset: auto;
    grid-column: 1 / -1;
    height: auto;
  }

  /* The head of the bus and the query line join the flow of the folded stage, first and full width, so no station slides under them */
  .sl-pres-pdo-head,
  .sl-pres-query {
    position: relative;
    inset: auto;
    grid-column: 1 / -1;
  }

  .sl-pres-query {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .sl-pres-query > code {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .sl-pres-params {
    grid-column: 1 / -1;
  }

  /* The modes of the driver leave the narrow head: the side panel spells them out, and the state keeps its place */
  .sl-pres-pdo-head {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .sl-pres-pdo-head > span {
    display: none;
  }

  .sl-pres-guard-scene {
    min-height: calc(var(--sl-guard-height) * 1.15);
  }

  .sl-pres-lanes {
    right: calc(var(--sl-guard-width) * 0.55);
    left: calc(var(--sl-guard-width) * 0.36);
  }

  .sl-pres-net {
    left: calc(var(--sl-space-5) + var(--sl-space-8));
  }

  .sl-pres-radar {
    left: var(--sl-space-8);
  }

  .sl-pres-house {
    right: calc(var(--sl-space-3) * -1);
    transform: scale(0.78);
    transform-origin: right bottom;
  }

  .sl-pres-zone,
  .sl-pres-queue,
  .sl-pres-traffic > .sl-pres-policy,
  .sl-pres-ambient:nth-child(2 of .sl-pres-ambient) {
    display: none;
  }

  .sl-pres-traffic {
    max-width: calc(100% - var(--sl-guard-width) * 0.5);
  }
}

@media (max-width: 560px) {
  .sl-pres-rings {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sl-pres-facts,
  .sl-pres-events,
  .sl-pres-detail,
  .sl-pres-stats-grid,
  .sl-pres-speed,
  .sl-pres-perf,
  .sl-pres-states,
  .sl-pres-guard-stats,
  .sl-pres-core-body,
  .sl-pres-map,
  .sl-pres-blocks-stage,
  .sl-pres-blocks-list,
  .sl-pres-pdo-stage,
  .sl-pres-flow {
    grid-template-columns: minmax(0, 1fr);
  }

  .sl-pres-core-menu {
    display: none;
  }

  .sl-pres-gallery[data-sl-pres="sites"] .sl-pres-gallery-track {
    grid-auto-columns: 100%;
  }

  .sl-pres-gallery[data-sl-pres="brand"] .sl-pres-gallery-track {
    grid-template-rows: calc(var(--sl-brand-height) * 1.25) repeat(2, calc(var(--sl-brand-height) * 0.8));
  }

  .sl-pres-gallery[data-sl-pres="brand"] .sl-pres-tile-copy > small {
    display: none;
  }

  .sl-pres-tile[data-sl-pres-feature] .sl-pres-tile-copy > small {
    display: block;
  }

  .sl-pres-gallery[data-sl-pres="brand"] .sl-pres-tile-copy > h3 {
    font-size: var(--sl-font-small);
  }

  .sl-pres-tile[data-sl-pres-feature] .sl-pres-tile-copy > h3 {
    font-size: var(--sl-font-h3);
  }

  .sl-pres-gallery-head {
    font-size: var(--sl-font-small);
  }

  .sl-pres-gallery-controls {
    gap: var(--sl-space-3);
  }

  .sl-pres-chart,
  .sl-pres-vitals,
  .sl-pres-body {
    padding: var(--sl-space-5);
  }

  .sl-pres-guard-scene {
    min-height: calc(var(--sl-guard-height) * 1.3);
  }

  .sl-pres-house {
    bottom: var(--sl-space-10);
    transform: scale(0.64);
  }

  .sl-pres-quarantine {
    bottom: var(--sl-space-6);
    left: var(--sl-space-5);
  }

  .sl-pres-ambient:nth-child(1 of .sl-pres-ambient) {
    bottom: calc(var(--sl-guard-height) * 0.24);
    left: var(--sl-space-5);
  }

  .sl-pres-allow,
  .sl-pres-deny,
  .sl-pres-track {
    display: none;
  }
}


/* Sections of the layout: fragments/section.html and sections/, only what the presentation has no form for */
.sl-sec {
  min-width: 0;
}

.sl-sec:not(:first-child),
.sl-sec + * {
  margin-top: var(--sl-space-6);
}

.sl-sec-lines {
  white-space: pre-line;
}

.sl-sec-acts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sl-space-4);
  margin: var(--sl-space-6) 0 0;
}

.sl-sec-acts .sl-but {
  margin: 0;
}

/* The picture of the hero and of a text beside it: one frame, its point of focus kept by the crop */
.sl-sec-pic {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--sl-pres-border);
  border-radius: var(--sl-radius-3);
}

#content .sl-sec-pic > img,
.sl-sec .sl-pres-principle > img {
  object-position: var(--sl-d-focus, center);
}

.sl-sec-hero-pic {
  background: var(--sl-pres-inset-bg);
  box-shadow: var(--sl-shadow-raised);
}

.sl-sec-hero-pic > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Features: the DNA cards or the technology cards in the columns the section asks, their icon in its tone */
.sl-sec .sl-pres-tech {
  margin-top: 0;
}

.sl-sec .sl-pres-principle-copy > header[data-sl-tone] > .bi {
  color: currentColor;
}

/* Text and picture: the picture of the showcase beside the words of a principle card, on either side */
.sl-sec-media {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sl-space-7);
}

.sl-sec-media > .sl-sec-pic {
  height: auto;
  min-height: var(--sl-site-height);
}

.sl-sec-flip > :is(.sl-sec-pic, .sl-sec-frame) {
  order: 1;
}

.sl-sec-copy {
  align-self: center;
  padding: 0;
}

.sl-sec-solo {
  grid-template-columns: minmax(0, 1fr);
}

.sl-sec-md > :first-child {
  margin-top: 0;
}

.sl-sec-md > :last-child {
  margin-bottom: 0;
}

/* A link of a text keeps the colour of a link of the site, which the root of the presentation hands down as the colour of the words */
.sl-sec-md a,
.sl-sec-cards a {
  color: var(--sl-pres-link-text);
}

/* Call: the claim card, its words on the left and the button on the right */
.sl-sec-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--sl-space-7);
  align-items: center;
  padding: var(--sl-space-7);
}

.sl-sec-cta > :not(.sl-sec-cta-but) {
  grid-column: 1;
  max-width: none;
}

.sl-sec-cta-but {
  position: relative;
  z-index: var(--sl-z-raised);
  grid-row: 1 / span 3;
  grid-column: 2;
}

/* Gallery: a picture of the showcase keeps its point of focus; a snapshot of a site, which names none, keeps its top */
#content .sl-sec .sl-pres-shot > img {
  object-position: var(--sl-d-focus, top);
}

/* Figures: the fact tiles of the hero, as many to a row as fit */
.sl-sec .sl-pres-facts {
  margin-top: 0;
  grid-template-columns: repeat(auto-fit, minmax(calc(var(--sl-pres-width) + var(--sl-space-8)), 1fr));
}

/* An outside frame: a film in the proportion of the screen, a map as tall as a showcase picture, a page as tall as its
   section asks; until the click its placeholder fills the frame with the picture of the section or its icon */
.sl-sec-frame {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--sl-pres-border);
  border-radius: var(--sl-radius-3);
  background: var(--sl-pres-inset-bg);
}

.sl-sec-film {
  aspect-ratio: 16 / 9;
}

.sl-sec-map {
  min-height: var(--sl-site-height);
}

.sl-sec-page {
  height: var(--sl-d-frame, var(--sl-site-height));
}

#content .sl-sec-frame :is(iframe, video) {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.sl-sec-load {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--sl-space-5);
}

#content .sl-sec-load > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--sl-d-focus, center);
}

.sl-sec-load > .bi {
  color: var(--sl-pres-muted-text);
  font-size: var(--sl-font-hero);
}

.sl-sec-load > .sl-but {
  position: relative;
  z-index: var(--sl-z-raised);
  margin: 0;
}

/* Map and contacts: the contacts one card to a line beside the map, read and copied as they are written, without the
   capitals and the mono face of a technology card */
.sl-sec-cards {
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
}

.sl-sec-cards .sl-pres-tech-card span {
  font-family: inherit;
  font-size: var(--sl-font-small);
  letter-spacing: normal;
  text-transform: none;
}

@media (width > 900px) {
  .sl-sec-cols-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sl-sec-cols-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sl-sec-cols-four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .sl-sec-media,
  .sl-sec-cta {
    grid-template-columns: minmax(0, 1fr);
  }

  .sl-sec-flip > :is(.sl-sec-pic, .sl-sec-frame) {
    order: 0;
  }

  .sl-sec-cta-but {
    grid-row: auto;
    grid-column: 1;
    justify-self: start;
    margin-top: var(--sl-space-5);
  }
}

/* A section kept off a device is gone at that width */
@media (max-width: 560px) {
  .sl-sec-no-phone {
    display: none;
  }
}

@media (width > 560px) {
  .sl-sec-no-desk {
    display: none;
  }
}

/* A part off screen, marked by presentation.js, costs no frame; the rise of the section follows the scroll, not the clock, so it is left out; these rules stand last to win */
:root .sl-pres [data-sl-pres-off] *,
:root .sl-pres [data-sl-pres-off] *::before,
:root .sl-pres [data-sl-pres-off] *::after,
:root .sl-pres [data-sl-pres-off]::before,
:root .sl-pres [data-sl-pres-off]::after {
  animation-play-state: paused;
}

/* ---- The editing layer of the site builder: the page in the frame of its screen, plugins/system/builder.js ---- */

/* A part answers the pointer; a section stands still, the rise of the presentation would move it under its ring */
[data-sl-build] [data-sl-pick] {
  cursor: pointer;
}

[data-sl-build] .sl-pres-section {
  animation: none;
}

[data-sl-build] [contenteditable] {
  outline: 0;
  cursor: text;
  caret-color: var(--sl-primary);
}

/* The rings stand over every layer of the site, its sticky menu and its pinned side tabs, and under nothing but its windows */
.sl-builder-ring {
  position: absolute;
  top: var(--sl-d-box-y);
  left: var(--sl-d-box-x);
  z-index: var(--sl-z-modal);
  width: var(--sl-d-box-w);
  height: var(--sl-d-box-h);
  box-sizing: border-box;
  pointer-events: none;
}

.sl-builder-ring[data-sl-build-pinned] {
  position: fixed;
}

.sl-builder-hover {
  outline: 1px dashed var(--sl-primary);
  outline-offset: -1px;
}

.sl-builder-sel {
  outline: var(--sl-ring-width) solid var(--sl-primary);
  outline-offset: calc(var(--sl-ring-width) * -1);
}

.sl-builder-name {
  position: absolute;
  top: 0;
  left: 0;
  padding: var(--sl-space-1) var(--sl-space-3);
  border-radius: 0 0 var(--sl-radius-2) 0;
  background: var(--sl-primary);
  color: var(--sl-on-solid);
  font-size: var(--sl-font-micro);
  line-height: var(--sl-line-normal);
  white-space: nowrap;
}

.sl-builder-hover .sl-builder-name {
  background: var(--sl-surface);
  color: var(--sl-primary);
  box-shadow: inset 0 0 0 1px var(--sl-primary);
}

.sl-builder-name:empty {
  display: none;
}

/* The screen draws the page scaled down and builder.js writes --sl-d-zoom back: the names, the toolbar, its button and the label keep their size */
.sl-builder-name,
.sl-builder-bar,
.sl-builder-add,
.sl-builder-ghost {
  zoom: var(--sl-d-zoom, 1);
}

/* The toolbar of the picked section is the capsule of the editors shown at once, at its upper right corner; the ring outranks the capsule of theme.css */
.sl-builder-sel .sl-builder-bar {
  position: absolute;
  top: var(--sl-space-3);
  right: var(--sl-space-3);
  max-width: none;
  box-shadow: var(--sl-shadow-float);
}

/* "Добавить секцию" sits centred on the lower edge of the picked section, half in and half out */
.sl-builder-sel .sl-builder-add {
  position: absolute;
  top: calc(100% - var(--sl-size-control) / 2);
  right: 0;
  left: 0;
  z-index: var(--sl-z-raised);
  width: fit-content;
  margin: 0 auto;
  box-shadow: var(--sl-shadow-float);
  pointer-events: auto;
}

/* Drag with the cursor: the grip of the toolbar, the label that follows the hand, the line where the section lands */
.sl-builder-grip {
  cursor: grab;
  touch-action: none;
}

[data-sl-build-drag],
[data-sl-build-drag] * {
  cursor: grabbing;
  user-select: none;
}

.sl-builder-line {
  border-radius: var(--sl-radius-pill);
  background: var(--sl-primary);
  box-shadow: var(--sl-shadow-float);
}

.sl-builder-ghost {
  position: fixed;
  top: var(--sl-d-pointer-y);
  left: var(--sl-d-pointer-x);
  z-index: var(--sl-z-toast);
  padding: var(--sl-space-2) var(--sl-space-4);
  border-radius: var(--sl-radius-pill);
  background: var(--sl-primary);
  color: var(--sl-on-solid);
  font-size: var(--sl-font-small);
  white-space: nowrap;
  pointer-events: none;
  translate: var(--sl-space-5) var(--sl-space-5);
}