/* The presentation page: the one page of the presentation module, dressed under one root. Bundled by name between
   base.css and theme.css, so a rule here that restyles a shared component (the knob ring, a chip) stands under the
   .sl-pres ancestor, where it outranks the later file. No custom property is declared here: every figure a template or
   a script writes arrives as --sl-d-*, every visual decision reads a token of base.css, and every animation is a
   multiple of --sl-pres-dur. Tones are carried by data-sl-tone on the element and read through currentColor: a state word
   (a title state, an event verdict, a log result, a trace result, a cockpit lamp) carries its tone from the template and
   this file gives it only its shape */

/* ===== Root, tones and the shared shapes =====
   partials/presentation.html: <div class="sl-pres"> hero, rail, twelve <section class="sl-pres-section" id="..."> */
.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-blocks-head b > .bi,
.sl-pres-presets > span > .bi,
.sl-pres-note > .bi,
.sl-pres-vars header > .bi,
.sl-pres-stats-board > .sl-pres-panel-head > span > .bi {
  margin-right: var(--sl-space-2);
  color: var(--sl-pres-link-text);
}

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

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

/* The monospace micro caption: one role wherever a small figure, a date, a sha or a note stands beside a value,
   so every element that carries it is listed here once and only its placement lives with its 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-mini span,
.sl-pres-voice-person small,
.sl-pres-pipe > div > span,
.sl-pres-rings > 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;
}

.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);
}

@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); }
}

/* 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;
}

/* 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"] {
  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);
}

/* ===== fragments/presentation-stat.html =====
   <div class="sl-pres-stat" data-sl-tone="..." style="--sl-d-part: N%"><span>label</span><b>value <small>unit</small></b><em>note</em><i></i></div>
   The bar at the foot is 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);
  overflow: hidden;
  border-radius: var(--sl-radius-pill);
  background: var(--sl-pres-inset-bg);
}

.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));
  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%);
}

/* ===== fragments/presentation-ring.html =====
   <div class="sl-pres-ring sl-knob sl-knob-{ok|info|warn|danger}"><svg class="sl-knob-svg" viewBox="0 0 44 44"><circle class="sl-knob-bg" .../>
   <circle class="sl-knob-val" ... pathLength="100" stroke-dasharray="{{ part }} 100"/></svg><div><b>27<small>ms</small></b><span>label</span></div></div>
   The theme's one ring at the gauge sizes: the cockpit and the vitals orb, the small statistics rings, the monitor tiles */
.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 .sl-pres-ring-xs {
  flex-basis: var(--sl-size-tile);
  width: var(--sl-size-tile);
  height: var(--sl-size-tile);
}

.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);
}

/* ===== fragments/presentation-head.html =====
   <div class="sl-pres-head"><span class="sl-pres-num">01</span><i class="bi bi-... sl-pres-icon"></i><h2>title</h2><p>lead</p>
   {% if state %}<span class="sl-pres-pill" data-sl-tone="success">state</span>{% endif %}</div> */
.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 section frame =====
   <section class="sl-pres-section" id="..."><div class="sl-pres-head">...</div><div class="sl-pres-body">...</div></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; }
}

/* ===== partials/presentation-hero.html =====
   <div class="sl-pres-hero"><div class="sl-pres-hero-grid"><div class="sl-pres-copy">cockpit, eyebrow, h1, lead</div>
   <div class="sl-pres-core" data-sl-pres="core">the control / runtime window: a menu of buttons, each carrying its trace, and the view</div></div><div class="sl-pres-facts">6 stats</div>
   <div class="sl-pres-ticker">...</div><div class="sl-pres-tech">6 cards</div></div> */
.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);
}

/* The rings of the corner: the arc every dashboard of the page repeats, drawn once behind the headline */
.sl-pres-hero::before {
  content: "";
  position: absolute;
  top: -210px;
  right: -180px;
  width: calc(var(--sl-pres-height) + var(--sl-space-7));
  height: calc(var(--sl-pres-height) + var(--sl-space-7));
  border: 1px solid var(--sl-tint);
  border-radius: var(--sl-radius-circle);
  box-shadow: 0 0 0 var(--sl-space-10) var(--sl-tint);
  opacity: var(--sl-fade-disabled);
  pointer-events: none;
}

.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 {
  color: var(--sl-pres-link-text);
}

.sl-pres .sl-pres-ring .sl-knob-val {
  stroke: currentColor;
  filter: drop-shadow(0 0 var(--sl-space-4) color-mix(in srgb, currentColor var(--sl-gauge-mix), transparent));
}

.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 {
  color: var(--sl-pres-good-text);
}

.sl-pres .sl-knob-warn .sl-knob-val,
.sl-pres .sl-pres-gauges > .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 {
  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 {
  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);
}

.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);
}

.sl-pres-gauges {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--sl-space-8);
  align-items: center;
  margin: var(--sl-space-7) 0 var(--sl-space-3);
}

/* The central plate is the state lamp of the system, the twin of the lamp of the admin cockpit: the mark alone, its line,
   halo, inner glow and slow dashed orbit all in the tone data-sl-tone gives it, and one ring breathing out of it while
   something waits. The plate draws no rounded line - no border, outline or box-shadow: Firefox paints a line round a
   circle in four quarters, and their seams cross the plate as a cross hair through its middle. The line, the halo, the
   glow and the ring are radial gradients with every edge fading over one pixel, the orbit a dashed SVG circle */
.sl-pres-plate {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: var(--sl-radius-circle);
  background:
    radial-gradient(
      circle closest-side,
      transparent calc(100% - var(--sl-space-3) - 2px),
      currentColor calc(100% - var(--sl-space-3) - 1px) calc(100% - var(--sl-space-3)),
      color-mix(in srgb, currentColor var(--sl-chip-mix), transparent) calc(100% - var(--sl-space-3) + 1px) calc(100% - 1px),
      transparent 100%
    ),
    radial-gradient(
      circle closest-side,
      transparent 60%,
      color-mix(in srgb, currentColor var(--sl-chip-tint-mix), transparent) calc(100% - var(--sl-space-3)),
      transparent calc(100% - var(--sl-space-3))
    ),
    radial-gradient(circle at 50% 38%, var(--sl-pres-core-bg), var(--sl-pres-panel-bg) 68%);
  padding: var(--sl-space-8);
}

.sl-pres-plate::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle closest-side,
    transparent calc(100% - var(--sl-space-1) - 1px),
    currentColor calc(100% - var(--sl-space-1)) calc(100% - 1px),
    transparent 100%
  );
  opacity: 0;
  pointer-events: none;
  animation: sl-pres-lamp calc(var(--sl-pres-dur) * 0.6) var(--sl-ease-out) infinite;
}

/* The lamp breathes only while something waits: a calm system shows a steady glow, so motion itself is the alarm */
.sl-pres-plate[data-sl-tone="success"]::after {
  animation: none;
}

.sl-pres-plate-orbit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  animation: sl-pres-spin calc(var(--sl-pres-dur) * 6) linear infinite;
}

.sl-pres-plate-orbit circle {
  fill: none;
  stroke: color-mix(in srgb, currentColor var(--sl-pulse-mix), transparent);
  stroke-width: 1.5;
  stroke-dasharray: 1.5 1.5;
  vector-effect: non-scaling-stroke;
}

@keyframes sl-pres-spin {
  to { transform: rotate(360deg); }
}

@keyframes sl-pres-lamp {
  from { opacity: var(--sl-fade-muted); transform: scale(0.92); }
  to { opacity: 0; transform: scale(1.12); }
}

/* The mark of the lamp is the one-colour mark of the theme cut out of the tone of the state, half the dial wide, so the
   brand in colour stays with the logo of the header and the lamp reads as a signal, not as a second logo */
.sl-pres-mark {
  display: block;
  width: calc(var(--sl-gauge-width) / 2);
  max-width: 100%;
  aspect-ratio: 1;
  background: currentColor;
  mask: url(../../images/logos/slaed-logo-mark-solid-black.svg) center / contain no-repeat;
}

/* The figure stands in the centre of the dial and its caption in the mouth of the arc, under the last ticks, as on an
   instrument: the caption no longer crosses the scale whatever its length */
.sl-pres-gauges > .sl-pres-ring > div {
  position: static;
  width: 100%;
  padding: 0 var(--sl-space-5);
}

.sl-pres-gauges > .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);
}

/* The figure, not the figure with its unit, stands on the centre of the dial: an empty first column as wide as the
   column of the unit keeps the digits in the middle and hangs the unit at their right */
.sl-pres-gauges > .sl-pres-ring > div > b::before {
  content: "";
}

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

.sl-pres-gauges > .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 {
  max-width: var(--sl-view-max-width);
  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-bar {
  display: flex;
  align-items: center;
  gap: var(--sl-space-2);
  height: var(--sl-field-height);
  border-bottom: 1px solid var(--sl-pres-border);
  padding: 0 var(--sl-space-4);
  font-size: var(--sl-font-micro);
  letter-spacing: var(--sl-track-wide);
  text-transform: uppercase;
  color: var(--sl-pres-muted-text);
}

.sl-pres-core-bar > span:first-child {
  display: flex;
  gap: var(--sl-space-2);
  margin-right: var(--sl-space-2);
}

.sl-pres-core-bar > span:first-child > i {
  width: var(--sl-space-3);
  height: var(--sl-space-3);
  border-radius: var(--sl-radius-circle);
  background: var(--sl-pres-frame-border);
}

.sl-pres-core-bar > span:last-child {
  margin-left: auto;
  text-transform: none;
}

.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,
.sl-pres-detail-head > 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,
.sl-pres-clean-row > 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 {
  display: flex;
  align-items: center;
  gap: var(--sl-space-2);
  white-space: nowrap;
}

.sl-pres-core-flow > span > i {
  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-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);
}

/* ===== partials/presentation-rail.html =====
   <div class="sl-pres-rail"><div class="sl-pres-rail-head"><b>01 / 12</b></div><nav class="sl-pres-rail-nav" data-sl-spy="px">
   <a class="sl-pres-rail-item" href="#id" data-sl-spy-mark="id"><i class="sl-pres-rail-node"></i><b>label</b><em>01</em></a>...</nav></div>
   A sticky dock over the sections: the script marks aria-current and data-sl-spy-done, writes the walked road as
   --sl-d-spy in pixels and the dock height as --sl-d-rail, which every section clears when it is scrolled to */
.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-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);
  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;
  gap: var(--sl-space-2);
  padding: 0 0 var(--sl-space-4);
  overflow-x: auto;
  overflow-anchor: none;
  scrollbar-width: none;
  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-4);
  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);
}

/* ===== 01 partials/presentation-rhythm.html =====
   <div class="sl-pres-rhythm"><article class="sl-pres-chart" data-sl-pres="chart" data-sl-pres-series="{json}">
   <div class="sl-pres-chart-meta"><div><strong>volume</strong><span>label <b>change</b></span></div><div class="sl-pres-segment">3 buttons</div></div>
   <div class="sl-pres-plot"><canvas></canvas><output class="sl-pres-tip" hidden></output></div>
   <div class="sl-pres-chart-foot"><div class="sl-pres-legend"><span><i></i>label</span>...</div><div class="sl-pres-segment">2 buttons</div></div></article>
   <article class="sl-pres-vitals"><div class="sl-pres-vitals-head"><span class="sl-pres-over"></span><i class="bi"></i></div>ring, h3, p,
   <div class="sl-pres-vitals-list"><span>label <b>value</b></span>...</div><span class="sl-pres-pill">note</span></article></div> */
.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: the one big ring of the page over the three figures of this request. The ring carries two inner arcs,
   the third to sixth circles of its svg, drawn thinner and in the accent and the good tone, 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-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sl-space-5);
  text-align: left;
}

.sl-pres-vitals-head > .bi {
  color: var(--sl-pres-good-text);
  font-size: var(--sl-size-icon-sm);
}

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

.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);
}

/* ===== 02 partials/presentation-modules.html =====
   <div class="sl-pres-modules"><div class="sl-pres-map sl-pres-scene"><svg class="sl-pres-wires">8 paths</svg>
   <div class="sl-pres-map-core"><i class="sl-pres-orbit"></i><img></div>
   fragments/presentation-module.html x8: <a class="sl-pres-mod sl-is-on" href><i class="sl-pres-dot"></i><b>name</b><small>tag · tag</small></a></div>
   <div class="sl-pres-detail">4 x <div class="sl-pres-card"><div class="sl-pres-detail-head"><b>Core</b><span>state</span></div><div class="sl-pres-tags"><span>tag</span></div></div></div></div>
   The eight modules stand on the map by their order: four corners, two flanks, two on the 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%);
}

.sl-pres-map-core img {
  width: calc(var(--sl-pres-width) * 0.5);
}

.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);
}

.sl-pres-orbit::before,
.sl-pres-orbit::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 {
  top: -3px;
  left: 50%;
}

.sl-pres-orbit::after {
  top: 50%;
  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: 13%; left: 27%; }
.sl-pres-mod:nth-child(8 of .sl-pres-mod) { right: 27%; bottom: 13%; }

.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-detail-head {
  display: flex;
  justify-content: space-between;
  font-size: var(--sl-font-small);
}

.sl-pres-detail-head > span {
  color: var(--sl-pres-good-text);
}

.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-1);
  background: var(--sl-pres-ground-bg);
  padding: var(--sl-space-1) var(--sl-space-2);
  font-family: var(--sl-face-mono);
  font-size: var(--sl-font-micro);
  color: var(--sl-pres-link-text);
}

/* The block router: the page mock in the middle, the block nodes on both sides wired to the slot they fill
   <div class="sl-pres-blocks"><div class="sl-pres-blocks-head"><div><span class="sl-pres-over"></span><b><i class="bi"></i> title</b></div>
   <div class="sl-pres-blocks-state"><i class="sl-pres-dot" data-sl-tone="success"></i><b>N active</b></div></div>
   <div class="sl-pres-blocks-layout"><div class="sl-pres-blocks-stage sl-pres-scene"><svg class="sl-pres-wires"></svg>
   <div class="sl-pres-page"><div class="sl-pres-slot">BANNER</div><div class="sl-pres-page-grid"><aside class="sl-pres-slot"><span>LEFT</span></aside>
   <div><div class="sl-pres-slot">CENTER TOP</div><div class="sl-pres-page-content"><i class="bi"></i><b>CONTENT</b><small>module output</small></div><div class="sl-pres-slot">CENTER BOTTOM</div></div>
   <aside class="sl-pres-slot"><span>RIGHT</span></aside></div><div class="sl-pres-slot">FOOTER</div></div>
   <div class="sl-pres-node sl-is-on">block</div> x8 (1-4 left, 5-8 right) <div class="sl-pres-router"><i class="bi"></i><b>POSITION</b><span>router</span></div></div>
   <aside class="sl-pres-blocks-panel">...</aside></div></div> */
.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);
}

.sl-pres-blocks-stage {
  min-height: calc(var(--sl-pres-height) + var(--sl-space-11) * 2);
}

.sl-pres-blocks-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sl-space-5);
  border-bottom: 1px solid var(--sl-pres-border);
  background: linear-gradient(90deg, var(--sl-pres-inset-bg), var(--sl-pres-panel-bg));
  padding: var(--sl-space-4);
}

.sl-pres-blocks-head b {
  display: block;
  margin-top: var(--sl-space-2);
  font-size: var(--sl-font-small);
  color: var(--sl-pres-text);
}

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

.sl-pres-blocks-state > b {
  margin: 0;
  color: var(--sl-pres-good-text);
}

.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);
}

.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 */
.sl-pres-page {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: var(--sl-z-raised);
  width: calc(var(--sl-pres-width) + var(--sl-space-11) * 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-8);
  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);
}

.sl-pres-page-grid {
  display: grid;
  grid-template-columns: var(--sl-space-9) 1fr var(--sl-space-9);
  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) * 0.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: the first four down the left edge, the next four down the right */
.sl-pres-blocks-stage > .sl-pres-node:nth-child(1 of .sl-pres-node) { top: 5%; left: 3%; }
.sl-pres-blocks-stage > .sl-pres-node:nth-child(2 of .sl-pres-node) { top: 27%; left: 3%; }
.sl-pres-blocks-stage > .sl-pres-node:nth-child(3 of .sl-pres-node) { top: 49%; left: 3%; }
.sl-pres-blocks-stage > .sl-pres-node:nth-child(4 of .sl-pres-node) { top: 71%; left: 3%; }
.sl-pres-blocks-stage > .sl-pres-node:nth-child(5 of .sl-pres-node) { top: 5%; right: 3%; }
.sl-pres-blocks-stage > .sl-pres-node:nth-child(6 of .sl-pres-node) { top: 27%; right: 3%; }
.sl-pres-blocks-stage > .sl-pres-node:nth-child(7 of .sl-pres-node) { top: 49%; right: 3%; }
.sl-pres-blocks-stage > .sl-pres-node:nth-child(8 of .sl-pres-node) { top: 71%; right: 3%; }

.sl-pres-router {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: var(--sl-z-overlay);
  display: grid;
  place-items: center;
  align-content: center;
  width: calc(var(--sl-size-icon-xl) + var(--sl-space-11));
  height: calc(var(--sl-size-icon-xl) + var(--sl-space-11));
  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) 70%);
  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);
}

/* The side panel of the router: the active layout, its block list and the four rules
   <aside class="sl-pres-blocks-panel"><div class="sl-pres-panel-head"><span>ACTIVE LAYOUT</span><b>CENTER TOP</b></div>
   <div class="sl-pres-blocks-list"><div class="sl-pres-bcard"><b>title</b><span>pos</span><small>note</small></div></div>
   <div class="sl-pres-rules"><span><i class="bi"></i><b>Visibility</b><em>all / guests / users</em></span> x4</div></aside> */
.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-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);
}

.sl-pres-blocks-stage > .sl-pres-node > b {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.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);
}

.sl-pres-rules {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--sl-pres-border);
}

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

.sl-pres-rules > span:nth-child(2n) {
  border-right: 0;
}

.sl-pres-rules > span:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.sl-pres-rules .bi {
  grid-row: 1 / 3;
  color: var(--sl-pres-link-text);
  font-size: var(--sl-font-micro);
}

.sl-pres-rules em {
  font-family: var(--sl-face-mono);
  font-size: var(--sl-font-micro);
  font-style: normal;
  color: var(--sl-pres-muted-text);
}

/* ===== 03 partials/presentation-guard.html =====
   <div class="sl-pres-guard"><div class="sl-pres-guard-scene sl-pres-scene">
   <span class="sl-pres-zone">01 / INGRESS</span><span class="sl-pres-zone">02 / CLASSIFY + FILTER</span><span class="sl-pres-zone">03 / TRUSTED ZONE</span>
   <i class="sl-pres-radar"></i><div class="sl-pres-lanes"><div><i></i></div> x5</div>
   <span class="sl-pres-ambient"><strong>N</strong> req/min</span><span class="sl-pres-ambient"><i class="bi"></i><b>policy</b> text</span><span class="sl-pres-ambient">...</span>
   <div class="sl-pres-traffic"><span data-sl-tone="primary"><i class="bi"></i>human</span> x5</div><span class="sl-pres-badge">GUARD ON</span>
   <div class="sl-pres-net"><i class="bi bi-globe2"></i><span>PUBLIC INTERNET</span></div>
   <div class="sl-pres-allow"><span>ALLOW BUS</span></div><div class="sl-pres-deny"><span>DENY</span></div><div class="sl-pres-track"><span>GUARD TRACK</span></div>
   <div class="sl-pres-gate"><span class="sl-pres-beam"></span><div class="sl-pres-shield"><i class="bi"></i><small>SCAN</small></div></div>
   <div class="sl-pres-quarantine"><div><span>QUARANTINE</span><b>0</b></div><div class="sl-pres-traps"><i></i> x10</div></div>
   <div class="sl-pres-house"><div class="sl-pres-chimney"><span></span></div><div class="sl-pres-roof"><div class="sl-pres-roof-plane"></div><div class="sl-pres-roof-gable"></div><div class="sl-pres-roof-fascia"></div></div>
   <div class="sl-pres-house-body"><div class="sl-pres-corner"></div><div class="sl-pres-corner"></div><div class="sl-pres-panes"><div class="sl-pres-pane sl-is-on" title><i class="bi"></i></div> x4</div>
   <div class="sl-pres-door sl-is-on"><i class="bi"></i><span>ENTRY</span></div><div class="sl-pres-foundation"></div></div><div class="sl-pres-ground"><i></i><i></i><i></i></div></div>
   </div><div class="sl-pres-guard-console">3 cards</div></div>
   Every figure of the drawing is a share of the house width or the court height, so one token retunes the whole scene */
.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;
}

/* 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 */
.sl-pres-radar {
  position: absolute;
  top: 50%;
  left: var(--sl-space-6);
  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: 50%;
  left: var(--sl-space-9);
  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);
}

.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-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-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) { top: calc(var(--sl-guard-height) * 0.11); left: var(--sl-space-7); }
.sl-pres-ambient:nth-child(3 of .sl-pres-ambient) { right: var(--sl-space-7); bottom: var(--sl-space-7); }

.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);
}

.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-primary-subtle);
  border-radius: var(--sl-radius-3);
  animation: sl-pres-spin calc(var(--sl-pres-dur) * 2) linear infinite;
}

.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 gate on its track once the plugin drives it: the height it patrols at arrives as --sl-d-gate-y, and its state
   colours the shield and the word under it */
.sl-pres-guard-scene[data-sl-pres-live] .sl-pres-gate {
  top: var(--sl-d-gate-y);
  transform: translateX(-50%);
}

.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-chip-tint-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-tile-mix), transparent);
}

/* The traveller: a request card cloned from the hidden pool by the plugin, carried by --sl-d-x and --sl-d-y over one
   share of the beat, then dropped into quarantine or flown to its window; the tone arrives as data-sl-tone
   <div class="sl-pres-traveler" data-sl-tone="danger" data-sl-pres-zone="1" data-sl-pres-result=".." data-sl-pres-bad><i class="bi"></i><span><b>SQLi</b><small>id=1 UNION …</small></span></div> */
.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-chip-tint-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-pulse-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);
}

/* 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));
  transform: skewY(-3deg);
}

.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-subtle);
  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.21);
  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.16);
}

.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);
}

/* A window or the door lit for a moment while a request arrives at it */
.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) var(--sl-primary);
}

.sl-pres-door {
  position: absolute;
  bottom: 0;
  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-bottom: 0;
  border-radius: var(--sl-radius-2) var(--sl-radius-2) var(--sl-radius-1) var(--sl-radius-1);
  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%);
}

.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);
}

.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);
}

/* The guard console: the classifier with its three 24-hour counters, the traffic types, the six-line legend
   <div class="sl-pres-guard-console"><div class="sl-pres-card"><div class="sl-pres-guard-row"><div><h3>..</h3><p>..</p></div><span class="sl-pres-pill" data-sl-tone="success">ACTIVE</span></div>
   <div class="sl-pres-guard-stats">3 x sl-pres-stat</div></div>
   <div class="sl-pres-card"><h3>..</h3><div class="sl-pres-rows"><div class="sl-pres-row" data-sl-tone><i class="bi"></i><span>Human</span><b>ALLOW</b></div> x5</div></div>
   <div class="sl-pres-card"><h3>..</h3><div class="sl-pres-log"><div><span>label</span><em data-sl-tone="success|danger">result</em></div> x6</div><p class="sl-pres-note"><i class="bi"></i>note</p></div></div> */

.sl-pres-guard-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sl-space-4);
}

.sl-pres-guard-row p {
  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(0, 1fr));
  gap: var(--sl-space-3);
  margin-top: var(--sl-space-4);
}

.sl-pres-guard-row h3 {
  margin: 0 0 var(--sl-space-3);
  font-size: var(--sl-font-body);
}

.sl-pres-guard-row h3 > .bi {
  margin-right: var(--sl-space-3);
  color: var(--sl-pres-link-text);
}

.sl-pres-guard-stats > .sl-pres-stat {
  padding: var(--sl-space-3);
}

.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);
}

/* ===== 04 partials/presentation-runtime.html =====
   <div class="sl-pres-speed"><div class="sl-pres-card"><h3>..</h3><div class="sl-pres-big">0.027<small> sec</small></div><div class="sl-pres-spark"><canvas></canvas></div></div>
   <div class="sl-pres-card"><h3>..</h3><div class="sl-pres-rows"><div class="sl-pres-row"><span>Queries</span><b>12</b></div><div class="sl-pres-bar" style="--sl-d-part: N%"><i></i></div>...</div></div>
   <div class="sl-pres-card"><h3>..</h3><div class="sl-pres-big">76<small> online</small></div><div class="sl-pres-rows">...</div></div>
   <div class="sl-pres-pdo">stage + console</div><div class="sl-pres-devtools">..</div><div class="sl-pres-events">5 x sl-pres-evt</div></div> */
.sl-pres-speed {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sl-space-3);
}

.sl-pres-speed > .sl-pres-card {
  min-height: var(--sl-pres-min-height);
}

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

.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);
}

.sl-pres-bar {
  height: var(--sl-space-1);
  overflow: hidden;
  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%;
  background: linear-gradient(90deg, var(--sl-pres-link-text), var(--sl-primary));
}

/* The PDO layer: the bus with its five stations on the left, the console on the right
   <div class="sl-pres-pdo"><div class="sl-pres-pdo-stage sl-pres-scene"><div class="sl-pres-pdo-head"><b><i class="bi"></i> DATABASE / PDO</b><span>mode</span><em>READY</em></div>
   <div class="sl-pres-query"><span>SELECT</span><code>sql</code><span class="sl-pres-params"><i>:cat</i></span></div><div class="sl-pres-bus"></div><i class="sl-pres-packet"></i>
   <div class="sl-pres-node"><i class="bi"></i><span>01</span><b>Module</b><small>note</small></div> x5
   <div class="sl-pres-return"><div class="sl-pres-result"><i class="bi"></i><span>result → <b>rows</b></span><em>ready</em></div><div class="sl-pres-bars"><i></i> x10</div></div></div>
   <div class="sl-pres-console"><div class="sl-pres-console-head"><i class="bi"></i><b>Database::getSqlQuery()</b><span>PREPARED</span></div>
   <pre class="sl-pres-code"><span class="sl-is-com">..</span></pre><div class="sl-pres-console-grid">4 x sl-pres-stat</div><div class="sl-pres-trace"><div><time>..</time><b>..</b><em data-sl-tone="success">..</em></div> x3</div></div></div> */
.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);
  grid-template-rows: auto 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 {
  grid-row: 1 / 3;
  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);
}

.sl-pres-params > i {
  border: 1px solid var(--sl-pres-border);
  border-radius: var(--sl-radius-1);
  background: var(--sl-pres-panel-bg);
  padding: var(--sl-space-1) var(--sl-space-2);
  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 */
.sl-pres-packet {
  position: absolute;
  top: calc(var(--sl-pres-height) * 0.42 - var(--sl-space-3));
  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 where --sl-d-x says and walks between nodes over one step,
   the row bars take the share the plugin wrote; a write turns the query line and the packet to the warning tone
   through data-sl-tone */
.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);
}

.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%; }

.sl-pres-return {
  position: absolute;
  top: calc(var(--sl-pres-height) * 0.63);
  right: var(--sl-space-5);
  left: var(--sl-space-5);
  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 {
  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 var(--sl-space-7);
}

.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;
}

/* The debugger: a tab bar and its panes, the performance pane open
   <div class="sl-pres-devtools"><div class="sl-pres-devtools-bar"><div><span class="sl-pres-over">..</span><b><i class="bi"></i> title</b></div><nav class="sl-pres-tabs"><button class="sl-is-on">..</button> x4</nav></div>
   <div class="sl-pres-tab-pane sl-is-on"><div class="sl-pres-perf">4 x sl-pres-stat</div><div class="sl-pres-note-row"><i class="bi"></i><span>..</span><b>..</b></div></div>
   <div class="sl-pres-tab-pane"><div class="sl-pres-errors"><div><span>..</span><i class="bi"></i><b>..</b><span>..</span><em>..</em></div></div><p class="sl-pres-note">..</p></div>
   <div class="sl-pres-tab-pane"><div class="sl-pres-vars"><article><header><i class="bi"></i> GET</header><code>..</code></article> x3</div></div>
   <div class="sl-pres-tab-pane"><div class="sl-pres-sql"><div><span class="sl-pres-mono">..</span><b>..</b><code>..</code></div></div></div></div>
   The tab pane carries its own name: the house of the guard scene has window panes of the same word, and one class cannot be a window and a tab */
.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);
}

.sl-pres-devtools-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sl-space-5);
  border-bottom: 1px solid var(--sl-pres-border);
  background: linear-gradient(90deg, var(--sl-pres-inset-bg), var(--sl-pres-panel-bg));
  padding: var(--sl-space-3) var(--sl-space-4);
}

.sl-pres-devtools-bar b {
  display: block;
  margin-top: var(--sl-space-1);
  font-size: var(--sl-font-small);
  color: var(--sl-pres-text);
}

.sl-pres-devtools-bar b > .bi {
  margin-right: var(--sl-space-2);
  color: var(--sl-danger);
}

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

.sl-pres-tabs > button {
  border: 1px solid 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);
  color: var(--sl-pres-muted-text);
  font-family: var(--sl-face-mono);
  font-size: var(--sl-font-micro);
  cursor: pointer;
  transition: color var(--sl-time-base) var(--sl-ease-out), border-color var(--sl-time-base) var(--sl-ease-out);
}

.sl-pres-tabs > button:hover {
  border-color: var(--sl-primary);
  color: var(--sl-pres-text);
}

.sl-pres-tabs > button.sl-is-on {
  border-color: var(--sl-primary);
  background: var(--sl-pres-inset-bg);
  color: var(--sl-pres-text);
  box-shadow: inset 0 -1px var(--sl-primary);
}

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

.sl-pres-tab-pane.sl-is-on {
  display: block;
}

.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 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;
}

/* ===== 05 partials/presentation-dev.html =====
   <div class="sl-pres-dev"><div class="sl-pres-dev-board sl-pres-scene"><div class="sl-pres-dev-head"><span class="sl-pres-pill"><i class="bi"></i>version · branch</span><span class="sl-pres-live"><i class="sl-pres-dot sl-is-live"></i>ACTIVE DEVELOPMENT</span></div>
   <div class="sl-pres-commits">fragments/presentation-commit.html x5: <a class="sl-pres-commit sl-is-on" href><span class="sl-pres-sha">f360f6a</span><div><b>title</b></div><div class="sl-pres-when"><time>date</time><small>note</small></div></a></div></div>
   <div class="sl-pres-dev-side"><div class="sl-pres-focus"><div class="sl-pres-panel-head"><span>COMMIT / FOCUS</span><b>HEAD</b></div><div class="sl-pres-focus-body"><span class="sl-pres-mono">sha · date</span><h3>title</h3><div class="sl-pres-tags">..</div></div></div>
   <div class="sl-pres-card"><div class="sl-pres-panel-head">..</div><div class="sl-pres-pipe"><i class="sl-pres-pipe-packet"></i><div><i class="bi"></i><span>CODE</span></div> x5</div></div>
   <div class="sl-pres-dev-foot">2 x sl-pres-stat</div></div></div> */
.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;
}

.sl-pres-dev-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sl-space-3);
}

.sl-pres-dev-head .sl-pres-pill > .bi {
  color: var(--sl-pres-good-text);
}

.sl-pres-live {
  display: flex;
  align-items: center;
  gap: 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 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-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-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 */
.sl-pres-pipe {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 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);
}

.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-radius: var(--sl-radius-circle);
  background: var(--sl-pres-inset-bg);
  box-shadow: var(--sl-pres-shadow);
  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);
}

/* ===== 06 partials/presentation-stats.html =====
   <div class="sl-pres-stats"><div class="sl-pres-stats-board sl-pres-scene"><div class="sl-pres-panel-head"><span><i class="bi"></i> STATISTICS / SITE TRAFFIC</span><b>today ..</b></div>
   <div class="sl-pres-stats-grid">5 x sl-pres-stat</div>
   <div class="sl-pres-hours"><div class="sl-pres-hours-head"><b>HITS BY HOUR</b><span>Statistics module</span></div><div class="sl-pres-hours-bars"><i style="--sl-d-part: N%"></i> x24</div><div class="sl-pres-hours-axis"><span>00</span>..</div></div></div>
   <div class="sl-pres-stats-side"><div class="sl-pres-claim"><span class="sl-pres-over">..</span><h3>..</h3><p>..</p><div class="sl-pres-tags">..</div></div>
   <div class="sl-pres-rings">3 x <div><div class="sl-pres-ring sl-pres-ring-sm sl-knob ..">..</div><span>RETURN</span></div></div><p class="sl-pres-note">..</p></div></div> */
.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);
}

.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));
  margin: 0 var(--sl-space-4) var(--sl-space-4);
  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-head,
.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-head > b {
  color: var(--sl-pres-link-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::after {
  content: "";
  position: absolute;
  top: -85px;
  right: -75px;
  width: calc(var(--sl-pres-width) + var(--sl-space-8));
  height: calc(var(--sl-pres-width) + var(--sl-space-8));
  border: 1px solid var(--sl-tint-strong);
  border-radius: var(--sl-radius-circle);
  box-shadow: 0 0 0 var(--sl-space-8) var(--sl-tint), 0 0 0 var(--sl-space-11) var(--sl-tint);
  pointer-events: none;
}

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

.sl-pres-claim > h3 {
  max-width: calc(var(--sl-pres-width) * 2);
  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 {
  max-width: calc(var(--sl-pres-width) * 2);
  margin: 0;
  font-size: var(--sl-font-micro);
  line-height: var(--sl-line-loose);
  color: var(--sl-pres-muted-text);
}

.sl-pres-rings {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sl-space-3);
  border: 1px solid var(--sl-pres-border);
  border-radius: var(--sl-radius-3);
  background: var(--sl-pres-panel-bg);
  padding: var(--sl-space-4);
}

.sl-pres-rings > div {
  text-align: center;
}

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

.sl-pres-stats-side > .sl-pres-note,
.sl-pres-arch-side > .sl-pres-note {
  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);
}

/* ===== 07 partials/presentation-pipeline.html =====
   <div class="sl-pres-arch"><div class="sl-pres-flow sl-pres-scene" data-sl-mode="hit|miss|bypass|off"><div class="sl-pres-flow-top"><span class="sl-pres-mono">route</span><span class="sl-pres-pill" data-sl-tone>MISS · BUILD</span></div>
   <svg class="sl-pres-paths" viewBox="0 0 700 460"><path class="sl-pres-path-ring"/><path class="sl-pres-path-live"/><circle class="sl-pres-path-packet"><animateMotion/></circle></svg>
   <div class="sl-pres-flow-core"><img><b>PARSER CACHE</b><small>note</small><span class="sl-pres-pill" data-sl-tone>state</span></div><span class="sl-pres-flow-chip"><i class="bi"></i> stored markup</span>
   <div class="sl-pres-node"><i class="bi"></i><span>01</span><b>Request</b><small><span>..</span><span>..</span></small></div> x7</div>
   <div class="sl-pres-arch-side"><div class="sl-pres-tree"><div class="sl-pres-panel-head">..</div><div class="sl-pres-case sl-is-on"><strong>HIT</strong><span>..</span></div> x3</div>
   <div class="sl-pres-states">4 x sl-pres-stat + <div class="sl-pres-stat sl-pres-clean-row">..</div></div><p class="sl-pres-note">..</p></div></div> */
.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% 48%, 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;
}

#content .sl-pres-paths {
  position: absolute;
  inset: var(--sl-space-11) var(--sl-space-3) var(--sl-space-5);
  width: calc(100% - var(--sl-space-6));
  height: calc(100% - var(--sl-space-11) - var(--sl-space-5));
  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: 50%;
  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 {
  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;
}

.sl-pres-flow > .sl-pres-node small {
  flex-wrap: wrap;
  gap: 0 var(--sl-space-2);
}

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

.sl-pres-flow-chip {
  position: absolute;
  top: calc(var(--sl-pres-height) * 0.4);
  left: 50%;
  z-index: var(--sl-z-overlay);
  border: 1px solid var(--sl-pres-frame-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-link-text);
  opacity: var(--sl-fade-disabled);
  transform: translateX(-50%);
  transition: opacity var(--sl-time-slow) var(--sl-ease-out);
}

.sl-pres-flow[data-sl-mode="hit"] .sl-pres-flow-chip {
  color: var(--sl-pres-good-text);
  opacity: 1;
}

/* The seven stations of a request around the core, by their order */
.sl-pres-flow > .sl-pres-node:nth-child(1 of .sl-pres-node) { top: calc(var(--sl-space-11) + var(--sl-space-3)); left: 50%; transform: translateX(-50%); }
.sl-pres-flow > .sl-pres-node:nth-child(2 of .sl-pres-node) { top: calc(var(--sl-pres-height) * 0.3); right: 9%; }
.sl-pres-flow > .sl-pres-node:nth-child(3 of .sl-pres-node) { top: calc(var(--sl-pres-height) * 0.63); right: 4%; }
.sl-pres-flow > .sl-pres-node:nth-child(4 of .sl-pres-node) { right: 15%; bottom: calc(var(--sl-pres-height) * 0.17); }
.sl-pres-flow > .sl-pres-node:nth-child(5 of .sl-pres-node) { bottom: var(--sl-space-8); left: 50%; transform: translateX(-50%); }
.sl-pres-flow > .sl-pres-node:nth-child(6 of .sl-pres-node) { bottom: calc(var(--sl-pres-height) * 0.17); left: 15%; }
.sl-pres-flow > .sl-pres-node:nth-child(7 of .sl-pres-node) { top: calc(var(--sl-pres-height) * 0.63); left: 4%; }

.sl-pres-flow > .sl-pres-node:nth-child(1 of .sl-pres-node):hover,
.sl-pres-flow > .sl-pres-node:nth-child(5 of .sl-pres-node):hover {
  transform: translateX(-50%) translateY(-2px);
}

.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);
}

.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;
}

.sl-pres-clean-row {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sl-space-3);
}

.sl-pres-clean-row > small > .sl-pres-dot {
  margin-right: var(--sl-space-2);
  width: var(--sl-space-2);
  height: var(--sl-space-2);
  color: var(--sl-pres-good-text);
}

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

/* ===== 08 partials/presentation-dna.html =====
   <div class="sl-pres-dna"><article class="sl-pres-principle"><img><div class="sl-pres-principle-copy"><header><i class="bi"></i><h3>..</h3></header><p>..</p><p>..</p></div></article> x4</div>
   The band picture wears the film every picture of the page wears, 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;
}

/* ===== 09 partials/presentation-archive.html and 10 partials/presentation-sites.html =====
   <div class="sl-pres-gallery" data-sl-pres="brand|sites"><div class="sl-pres-gallery-head"><span>..</span><b>N items</b></div>
   <div class="sl-pres-gallery-track" tabindex="0">
   fragments/presentation-brand.html: <article class="sl-pres-tile" data-sl-pres-fit="contain"><a class="sl-pres-tile-open" href="original" data-sl-shot-open title="..."><img src="thumb"></a>
   <span class="sl-pres-tile-tools"><button type="button"><i class="bi"></i></button><a href="original" download><i class="bi"></i></a></span><div class="sl-pres-tile-copy"><small>group</small><h3>title</h3></div></article>
   fragments/presentation-site.html: <article class="sl-pres-tile"><figure class="sl-pres-shot"><img><b class="sl-pres-rate"><i class="bi"></i>723</b></figure><div class="sl-pres-tile-copy"><small>cat</small><h3>name</h3></div></article>
   </div><div class="sl-pres-gallery-controls"><button data-sl-pres-step="-1">..</button><output></output><input type="range" data-sl-pres-range><button data-sl-pres-step="1">..</button></div></div>
   One picture treatment for the principles, the brand archive and the site strip: a film of the brand colour and a soft filter rest on the picture and lift under the pointer */
.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: 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);
}

/* ===== 11 partials/presentation-voices.html =====
   <div class="sl-pres-voices"><div class="sl-pres-panel-head"><span>OWNER SIGNALS</span><b class="sl-pres-pill" data-sl-tone="warning">note</b></div>
   <div class="sl-pres-voices-track">fragments/presentation-voice.html: <article class="sl-pres-voice" data-sl-tone="primary"><p>quote</p><i class="sl-pres-voice-sep"></i>
   <div class="sl-pres-voice-person"><span class="sl-pres-voice-ava">AK</span><div><strong>name</strong><small>site · role</small></div><div class="sl-pres-since"><span>SINCE</span><b>2011</b></div></div>
   <div class="sl-pres-voice-marks"><span><i class="bi"></i>Forum</span>..</div></article></div>
   <div class="sl-pres-voices-foot"><span><i class="sl-pres-dot sl-is-live"></i>note</span><a href="#showcase"><i class="bi"></i> back</a></div></div> */
.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 > .sl-pres-panel-head {
  padding: var(--sl-space-4) var(--sl-space-5);
}

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

.sl-pres-voice {
  position: relative;
  isolation: isolate;
  min-height: calc(var(--sl-pres-min-height) + var(--sl-space-5));
  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,
.sl-pres-mini b {
  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 {
  text-align: right;
}

.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-1);
  background: var(--sl-pres-ground-bg);
  padding: var(--sl-space-2);
  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;
}

.sl-pres-voices-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sl-space-4);
  border-top: 1px solid var(--sl-pres-border);
  background: color-mix(in srgb, var(--sl-pres-panel-bg) var(--sl-fav-mix), transparent);
  padding: var(--sl-space-3) var(--sl-space-5);
  font-family: var(--sl-face-mono);
  font-size: var(--sl-font-micro);
  color: var(--sl-pres-muted-text);
}

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

.sl-pres-voices-foot .sl-pres-dot {
  width: var(--sl-space-2);
  height: var(--sl-space-2);
  color: var(--sl-pres-good-text);
}

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

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

/* ===== 12 partials/presentation-pulse.html =====
   <div class="sl-pres-pulse"><article class="sl-pres-pulse-card" data-sl-tone="primary"><div class="sl-pres-pulse-head"><span><i class="bi"></i></span><div><b>title</b><span>OVERLINE</span></div></div>
   <div class="sl-pres-pulse-body"><time>date</time><h3>title</h3><p>text</p></div><div class="sl-pres-pulse-foot"><i class="sl-pres-dot sl-is-live"></i><a href><span>All news</span> <i class="bi"></i></a></div></article> x4
   <div class="sl-pres-monitor"><div class="sl-pres-monitor-title"><span class="sl-pres-over">..</span><h3>..</h3><p>..</p></div>
   <div class="sl-pres-mini"><div class="sl-pres-ring sl-pres-ring-xs sl-knob .."><svg/><i class="bi"></i></div><div><span>CPU</span><b>6 / 12</b></div></div> x3
   <div class="sl-pres-soft"><span><i class="bi"></i>SLAED 8.0</span>..</div></div></div> */

.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,
.sl-pres-monitor-title > 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);
}

.sl-pres-monitor {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: calc(var(--sl-pres-width) * 1.35) 1fr 1fr 1fr 1.3fr;
  gap: var(--sl-space-3);
  align-items: stretch;
  border: 1px solid var(--sl-pres-border);
  border-radius: var(--sl-radius-3);
  background: var(--sl-pres-panel-bg);
  padding: var(--sl-space-4);
}

.sl-pres-monitor-title {
  padding: var(--sl-space-3);
}

.sl-pres-monitor > .sl-pres-note {
  grid-column: 2 / -1;
}

.sl-pres-monitor-title > h3 {
  margin: var(--sl-space-2) 0;
  font-size: var(--sl-font-small);
  color: var(--sl-pres-text);
}

.sl-pres-mini {
  display: flex;
  align-items: center;
  gap: 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);
}

.sl-pres-mini > div:last-child {
  min-width: 0;
}

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

.sl-pres-soft > span {
  display: flex;
  align-items: center;
  gap: var(--sl-space-2);
  font-family: var(--sl-face-mono);
  font-size: var(--sl-font-micro);
  color: var(--sl-pres-muted-text);
}

.sl-pres-soft .bi {
  color: var(--sl-pres-link-text);
}

/* ===== The narrower steps of the ladder ===== */
@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);
  }

  .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-monitor {
    grid-template-columns: calc(var(--sl-pres-width) * 1.35) repeat(2, 1fr);
  }

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

  .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);
  }

  .sl-pres-blocks-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .sl-pres-blocks-panel > .sl-pres-panel-head {
    grid-column: 1 / -1;
  }

  .sl-pres-rules {
    border-top: 0;
    border-left: 1px solid var(--sl-pres-border);
  }

  .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-devtools-bar {
    flex-direction: column;
    align-items: flex-start;
  }

  .sl-pres-tabs {
    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-pres-plate {
    grid-column: 1 / -1;
    grid-row: 1;
    width: calc(var(--sl-gauge-width) + var(--sl-space-8));
  }

  .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-blocks-panel,
  .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-rules {
    border-top: 1px solid var(--sl-pres-border);
    border-left: 0;
  }

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

  .sl-pres-monitor > .sl-pres-note,
  .sl-pres-monitor-title,
  .sl-pres-soft {
    grid-column: 1 / -1;
  }

  .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);
  }

  .sl-pres-pdo-stage {
    padding-top: calc(var(--sl-space-11) * 2);
  }

  #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,
  .sl-pres-flow-chip {
    display: none;
  }

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

  .sl-pres-pdo-head,
  .sl-pres-query {
    right: var(--sl-space-4);
    left: var(--sl-space-4);
  }

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

  .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: var(--sl-space-5);
  }

  .sl-pres-radar {
    left: 0;
  }

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

  .sl-pres-zone,
  .sl-pres-ambient:nth-child(2 of .sl-pres-ambient),
  .sl-pres-ambient:nth-child(3 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-facts,
  .sl-pres-events,
  .sl-pres-detail,
  .sl-pres-stats-grid,
  .sl-pres-speed,
  .sl-pres-perf,
  .sl-pres-monitor,
  .sl-pres-states,
  .sl-pres-guard-stats,
  .sl-pres-core-body,
  .sl-pres-map,
  .sl-pres-blocks-stage,
  .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;
  }
}

/* No motion at all where the reader asked for none: every sweep, orbit, lane and packet stands still */
@media (prefers-reduced-motion: reduce) {
  .sl-pres *,
  .sl-pres *::before,
  .sl-pres *::after {
    animation: none;
    transition: none;
  }

  .sl-pres-rail-nav {
    scroll-behavior: auto;
  }
}