explico 0.13.1 → 0.15.0

package/src/styles/deck.css

@@ -0,0 +1,1150 @@
+/* Decks (docs/authoring/deck.md): a lesson's slide edition.
+
+   The page is a column of frames — the study page a reader scrolls, every
+   frame at its last step with its notes under it — and Present mode shows one
+   frame at a time on the whole screen (`components/deck/deck-controller.ts`).
+
+   A frame's canvas is laid out at the course's canvas size, 450 px tall and
+   as wide as the page's reading column (800, 720 or 600 px for 16:9, 16:10,
+   4:3), so a figure, a table or a lab lays out on it at the size it was made
+   for. Its type scale is fixed to it, and it is scaled to its stage with a
+   transform, as a diagram is (docs/diagram-scaling.md): it lays out the same
+   at every width, so what fits when the build measures it fits on a phone and
+   on a projector. Until the controller has measured the stage, the frame
+   shows its content in the page's own flow. */
+
+/* A slide's edge on the deck's page (`appearance.slides` in the course
+   settings, `course-config.ts`; `LayoutHeader.astro` writes the choice on
+   `[data-explico-slides]`):
+
+     lifted  an edge and a drop shadow, and in the dark theme a sheet a step
+             lighter than the page. The default; it needs no attribute.
+     edge    the edge and the shadow, on the page's own colour.
+     sorter  the deck on a tinted well, each slide a sheet on it.
+
+   A shadow hardly shows on a near-black page, so the dark edge is a real
+   hairline: Starlight's `hairline-shade` there is the page's own colour, and
+   a dark slide had no visible edge. Present mode, print and a figure
+   captured for the exports draw no edge, shadow, lift or well (below). */
+:root {
+  --deck-stage-edge: hsl(224 10% 24%);
+  --deck-stage-shadow: 0 2px 4px hsla(0 0% 0% / 0.45), 0 10px 28px hsla(0 0% 0% / 0.6);
+  --deck-stage-lift: 5%;
+  --deck-well: transparent;
+}
+:root[data-theme='light'] {
+  --deck-stage-edge: hsl(224 14% 88%);
+  --deck-stage-shadow: 0 2px 4px hsla(224 30% 20% / 0.08), 0 8px 18px hsla(224 30% 20% / 0.1),
+    0 22px 44px hsla(224 30% 20% / 0.1);
+  --deck-stage-lift: 0%;
+}
+:root:has([data-explico-slides='edge']) {
+  --deck-stage-edge: hsl(224 10% 26%);
+  --deck-stage-shadow: 0 1px 2px hsla(0 0% 0% / 0.5), 0 6px 20px hsla(0 0% 0% / 0.55);
+  --deck-stage-lift: 0%;
+  --deck-well: transparent;
+}
+:root[data-theme='light']:has([data-explico-slides='edge']) {
+  --deck-stage-edge: hsl(224 14% 86%);
+  --deck-stage-shadow: 0 1px 2px hsla(224 30% 20% / 0.08), 0 4px 10px hsla(224 30% 20% / 0.08),
+    0 14px 30px hsla(224 30% 20% / 0.08);
+  --deck-stage-lift: 0%;
+  --deck-well: transparent;
+}
+:root:has([data-explico-slides='sorter']) {
+  --deck-stage-edge: hsl(224 10% 22%);
+  --deck-stage-shadow: 0 2px 4px hsla(0 0% 0% / 0.5), 0 8px 22px hsla(0 0% 0% / 0.55);
+  --deck-stage-lift: 3%;
+  --deck-well: color-mix(in oklab, var(--sl-color-bg), black 30%);
+}
+:root[data-theme='light']:has([data-explico-slides='sorter']) {
+  --deck-stage-edge: hsl(224 14% 86%);
+  --deck-stage-shadow: 0 1px 2px hsla(224 30% 20% / 0.08), 0 4px 12px hsla(224 30% 20% / 0.1);
+  --deck-stage-lift: 0%;
+  --deck-well: hsl(224 22% 94.5%);
+}
+
+.deck {
+  --deck-scale: 1;
+  --deck-ink: var(--sl-color-white);
+  --deck-muted: var(--sl-color-gray-3);
+  --deck-accent: var(--sl-color-text-accent);
+  --deck-rule: var(--sl-color-hairline);
+  --deck-paper: var(--sl-color-bg);
+  display: flex;
+  flex-direction: column;
+  gap: 2.25rem;
+  margin-block: 1.5rem 2rem;
+}
+
+.deck-frame {
+  margin: 0;
+}
+
+.deck-stage {
+  position: relative;
+  /* Under the frame's line, its own gap: not the prose's. */
+  margin-block-start: 0;
+  border: 1px solid var(--deck-stage-edge);
+  border-radius: 0.5rem;
+  background: var(--deck-paper);
+  box-shadow: var(--deck-stage-shadow);
+}
+
+/* The lifted sheet: what the slide draws on its own background (a table's
+   header, a lab's panel) takes the sheet's colour, not the page's. */
+@media screen {
+  :root:not(.deck-presenting) .deck:not([data-deck-static]) {
+    --deck-paper: color-mix(in oklab, var(--sl-color-bg), var(--sl-color-white) var(--deck-stage-lift));
+  }
+  :root:not(.deck-presenting) .deck:not([data-deck-static]) .deck-stage {
+    --sl-color-bg: var(--deck-paper);
+  }
+  :root:not(.deck-presenting):has([data-explico-slides='sorter']) .deck[data-deck-ready]:not([data-deck-static]) {
+    margin-inline: calc(-1 * var(--sl-content-pad-x));
+    padding: 0.75rem var(--sl-content-pad-x) 1.5rem;
+    border-radius: 0.75rem;
+    background: var(--deck-well);
+  }
+  :root:has([data-explico-slides='sorter']) .deck-map {
+    background: var(--deck-well);
+  }
+}
+
+.deck[data-deck-ready] .deck-stage {
+  aspect-ratio: 16 / 9;
+  overflow: hidden;
+}
+.deck[data-deck-ready][data-aspect='16:10'] .deck-stage {
+  aspect-ratio: 16 / 10;
+}
+.deck[data-deck-ready][data-aspect='4:3'] .deck-stage {
+  aspect-ratio: 4 / 3;
+}
+/* A figure captured for the exports is drawn at its own size: the canvas
+   unscaled and unclipped, so a lab on it hydrates and measures as laid out
+   (deck-controller.ts, `explico:prepare-static-export`). */
+.deck[data-deck-ready][data-deck-static] .deck-stage {
+  aspect-ratio: auto;
+  width: var(--deck-canvas-width, 800px);
+  height: var(--deck-canvas-height, 450px);
+  overflow: visible;
+}
+
+.deck-canvas {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  padding: 1.25rem 1.5rem;
+  color: var(--deck-ink);
+}
+
+.deck[data-deck-ready] .deck-canvas {
+  position: absolute;
+  inset: 0 auto auto 0;
+  width: var(--deck-canvas-width, 800px);
+  height: var(--deck-canvas-height, 450px);
+  padding: 30px 44px 34px;
+  transform: scale(var(--deck-scale));
+  transform-origin: 0 0;
+  overflow: hidden;
+  font-size: 20px;
+  line-height: 1.38;
+}
+.deck[data-deck-ready][data-deck-static] .deck-canvas {
+  transform: none;
+  overflow: visible;
+}
+
+/* The canvas sets its own type: none of the page's prose rhythm reaches in. */
+.deck-canvas :is(h2, h3, p, ul, ol, li, figure, table, blockquote) {
+  margin: 0;
+}
+.deck-canvas .deck-frame__body > * + * {
+  margin-block-start: 0.6em;
+}
+.deck-canvas .deck-frame__body :is(ul, ol) {
+  padding-inline-start: 1.15em;
+}
+.deck-canvas .deck-frame__body li + li {
+  margin-block-start: 0.3em;
+}
+
+.deck .deck-canvas .deck-frame__title {
+  margin: 0 0 0.55em;
+  font-size: 1.45em;
+  font-weight: 650;
+  line-height: 1.15;
+  color: var(--deck-accent);
+  letter-spacing: -0.005em;
+}
+
+.deck-frame__body {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+.deck[data-deck-ready] .deck-frame__body {
+  overflow: hidden;
+}
+
+/* A frame whose content does not fit (rule D2): the build fails on it, and
+   while an author drafts, the page says so where it happens. */
+.deck-frame[data-deck-overflow] .deck-stage {
+  outline: 2px dashed #d33;
+  outline-offset: 2px;
+}
+.deck-frame[data-deck-overflow] .deck-stage::after {
+  content: 'Does not fit its frame (rule D2)';
+  position: absolute;
+  inset-block-start: 0.4rem;
+  inset-inline-end: 0.4rem;
+  padding: 0.15rem 0.45rem;
+  border-radius: 0.25rem;
+  background: #d33;
+  color: #fff;
+  font: 600 0.7rem/1.2 var(--sl-font, system-ui);
+}
+
+/* A display equation on a frame: room around it, its number at the edge. */
+.deck-canvas .keyed-equation,
+.deck-canvas .katex-display {
+  margin-block: 0.45em;
+}
+
+/* The legend line: the symbols the frame introduces, each with its name. */
+.deck-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.15em 1.1em;
+  margin-block-start: 0.6em;
+  padding-block-start: 0.45em;
+  border-block-start: 1px solid var(--deck-rule);
+  font-size: 0.62em;
+  line-height: 1.3;
+  color: var(--deck-muted);
+}
+.deck-legend__item {
+  white-space: nowrap;
+}
+.deck-legend__item .katex {
+  color: var(--deck-ink);
+}
+
+.deck-frame__foot {
+  display: none;
+}
+.deck[data-deck-ready] .deck-frame__foot {
+  position: absolute;
+  inset-inline: 44px 16px;
+  inset-block-end: 9px;
+  display: flex;
+  justify-content: space-between;
+  gap: 1em;
+  font-size: 10px;
+  line-height: 1;
+  color: var(--deck-muted);
+  font-variant-numeric: tabular-nums;
+}
+.deck-frame__number {
+  margin-inline-start: auto;
+}
+
+/* A section's divider and the generated frames. */
+.deck[data-deck-ready] .deck-frame--section .deck-canvas,
+.deck[data-deck-ready] .deck-frame--title .deck-canvas {
+  justify-content: center;
+}
+.deck .deck-frame--section .deck-frame__title {
+  font-size: 1.9em;
+  padding-block-end: 0.35em;
+  border-block-end: 2px solid var(--deck-accent);
+  align-self: flex-start;
+}
+.deck-title__title {
+  font-size: 2.1em;
+  font-weight: 700;
+  line-height: 1.1;
+  color: var(--deck-accent);
+}
+.deck-title__course {
+  margin-block-start: 0.8em;
+  font-size: 1em;
+}
+.deck-title__authors,
+.deck-title__version {
+  margin-block-start: 0.3em;
+  font-size: 0.7em;
+  color: var(--deck-muted);
+}
+.deck-frame--references .deck-frame__body {
+  font-size: 0.66em;
+}
+
+/* Steps: in Present mode a later step waits for its key press; the study page
+   and print show every step. */
+.deck-step {
+  transition: opacity 180ms ease-out;
+}
+.deck-step.is-future {
+  visibility: hidden;
+  opacity: 0;
+}
+li.deck-step {
+  display: list-item;
+}
+
+/* A spotlit symbol: every place it shows on the frame. */
+.deck-canvas .deck-spotlight {
+  border-radius: 0.15em;
+  background: color-mix(in srgb, var(--deck-accent) 22%, transparent);
+  box-shadow: 0 0 0 0.12em color-mix(in srgb, var(--deck-accent) 22%, transparent);
+  transition: background-color 200ms ease-out, box-shadow 200ms ease-out;
+}
+
+/* The speaker's notes, under the frame on the study page. */
+.deck-notes {
+  margin-block-start: 0.65rem;
+  padding: 0.65rem 0.9rem;
+  border-inline-start: 3px solid var(--sl-color-accent);
+  background: var(--sl-color-gray-7, var(--sl-color-gray-6));
+  font-size: var(--sl-text-sm);
+  line-height: 1.55;
+}
+.deck-notes::before {
+  content: 'Speaker notes';
+  display: block;
+  margin-block-end: 0.25rem;
+  font-size: var(--sl-text-xs);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--sl-color-gray-3);
+}
+.deck-notes > :first-child {
+  margin-block-start: 0;
+}
+.deck[data-notes='presenter'] .deck-notes,
+.deck[data-notes='off'] .deck-notes {
+  display: none;
+}
+
+/* The deck's header actions (`LayoutPageTitle.astro`). */
+.deck-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem 0.9rem;
+  margin-block-start: 0.85rem;
+  font-size: var(--sl-text-sm);
+}
+.deck-actions__present {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.35rem 0.85rem;
+  border: 1px solid var(--sl-color-accent);
+  border-radius: 999px;
+  background: var(--sl-color-accent);
+  color: var(--sl-color-black);
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+}
+.deck-actions__present:hover,
+.deck-actions__present:focus-visible {
+  background: var(--sl-color-accent-high);
+  border-color: var(--sl-color-accent-high);
+}
+/* "Continue at slide N" / "Present again" (`deck-controller.ts`): it presents
+   too, so it is Present's shape, in outline, the second choice beside it. */
+.deck-actions__resume {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.35rem 0.85rem;
+  border: 1px solid var(--sl-color-accent);
+  border-radius: 999px;
+  background: transparent;
+  color: var(--sl-color-text-accent);
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+}
+.deck-actions__resume:hover,
+.deck-actions__resume:focus-visible {
+  background: var(--sl-color-accent-low);
+}
+.deck-actions__count {
+  color: var(--sl-color-gray-3);
+}
+/* "Read the chapter", "Open the part", "Slides for this chapter" and "…for
+   this part": links in the title's line, as its "What changed" is. */
+.deck-actions a {
+  color: var(--sl-color-text-accent);
+}
+
+/* The reader's marks (`deck-memory.ts`, set by `deck-controller.ts`): the
+   sidebar's two (`global.css`), a ring for a frame Present mode has not shown
+   yet and an accent dot for one that changed since it did. The line under
+   the actions counts them and holds the two resets; each frame's line and the
+   slide map show them frame by frame. The screen's alone, as the actions
+   are. */
+.deck,
+.deck-actions {
+  --page-mark-size: 0.4375rem;
+}
+.deck-actions__mark::before,
+.deck-frame__state::before {
+  content: '';
+  flex: none;
+  box-sizing: border-box;
+  width: var(--page-mark-size);
+  height: var(--page-mark-size);
+  border-radius: 50%;
+}
+.deck-actions__mark[data-frame-mark='unseen']::before {
+  border: 1.5px solid var(--sl-color-gray-4);
+}
+.deck-actions__mark[data-frame-mark='changed']::before {
+  background: var(--sl-color-text-accent);
+}
+
+.deck-actions__marks {
+  display: flex;
+  flex-basis: 100%;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.25rem 0.85rem;
+  color: var(--sl-color-gray-2);
+  font-size: var(--sl-text-xs);
+}
+.deck-actions__mark:not([hidden]) {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+}
+.deck-actions__mark-buttons {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+}
+.deck-actions__mark-button {
+  padding: 0.1rem 0.3rem;
+  border: 0;
+  border-radius: 0.25rem;
+  background: none;
+  color: var(--sl-color-text-accent);
+  font: inherit;
+  cursor: pointer;
+}
+.deck-actions__mark-button:not([aria-disabled='true']):hover,
+.deck-actions__mark-button:focus-visible {
+  background: var(--sl-color-accent-low);
+}
+/* Out of use (nothing to change), in its place, as the sidebar's. */
+.deck-actions__mark-button[aria-disabled='true'] {
+  color: var(--sl-color-gray-3);
+  cursor: default;
+}
+.deck-actions__marks-status {
+  flex-basis: 100%;
+  margin: 0;
+}
+
+/* Each frame's line (`installLines`): "Slide 5", the frame's state, and the
+   button that presents from it, above the frame and outside its canvas, so
+   it never covers the frame and keeps the page's size at any scale. Never in
+   Present mode, an export's figure capture or print. */
+.deck-frame__line {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.35rem 0.75rem;
+  min-height: 2.1rem;
+  margin-block-end: 0.4rem;
+  font-size: var(--sl-text-sm);
+  line-height: 1.3;
+  color: var(--sl-color-gray-3);
+}
+.deck-frame__name {
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  color: var(--sl-color-gray-2);
+}
+.deck-frame__state:not([hidden]) {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+}
+/* Shown, quietly, with a check; not shown yet and changed since in the
+   accent, with the sidebar's ring and dot. */
+.deck-frame__state[data-frame-state='shown']::before {
+  width: 0.75rem;
+  height: 0.75rem;
+  border-radius: 0;
+  background: currentColor;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5 5L20 6.5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5 5L20 6.5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+.deck-frame__state:is([data-frame-state='unseen'], [data-frame-state='changed']) {
+  color: var(--sl-color-text-accent);
+  font-weight: 600;
+}
+.deck-frame__state[data-frame-state='unseen']::before {
+  border: 1.5px solid currentColor;
+}
+.deck-frame__state[data-frame-state='changed']::before {
+  background: currentColor;
+}
+
+/* The line's button, at its end: "Continue here", filled as Present is, on
+   the frame to continue at, always shown; "Present from here", outlined, on
+   every other, shown while the pointer is on the frame or focus is in it
+   (it is in the tab order, so a keyboard reaches it), the frame ringed in
+   the accent then. Where there is no hover it is always shown, as its glyph
+   alone. */
+.deck-frame__present {
+  margin-inline-start: auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.28rem 0.85rem;
+  border: 1px solid var(--sl-color-accent);
+  border-radius: 999px;
+  background: var(--sl-color-bg);
+  color: var(--sl-color-text-accent);
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+  opacity: 0;
+}
+/* Focus that a keyboard moved: not the frame Present mode left focused
+   after a click. */
+.deck-frame:is(:hover, :focus-visible, :has(:focus-visible)) .deck-frame__present,
+.deck-frame__present:focus-visible,
+.deck-frame[data-deck-continue] .deck-frame__present {
+  opacity: 1;
+}
+.deck-frame__present:hover,
+.deck-frame__present:focus-visible {
+  background: var(--sl-color-accent-low);
+}
+.deck-frame[data-deck-continue] .deck-frame__present {
+  background: var(--sl-color-accent);
+  color: var(--sl-color-black);
+}
+.deck-frame[data-deck-continue] .deck-frame__present:hover,
+.deck-frame[data-deck-continue] .deck-frame__present:focus-visible {
+  border-color: var(--sl-color-accent-high);
+  background: var(--sl-color-accent-high);
+}
+:root:not(.deck-presenting) .deck[data-deck-lines] .deck-frame:is(:hover, :focus-visible, :has(:focus-visible)) .deck-stage {
+  box-shadow: 0 0 0 2px var(--sl-color-accent), var(--deck-stage-shadow);
+}
+/* A frame focused itself (Present mode leaves focus on the frame it ended
+   at) shows it by that ring, not by an outline round its line and notes. */
+:root:not(.deck-presenting) .deck[data-deck-lines] .deck-frame:focus-visible {
+  outline: none;
+}
+@media (hover: none) {
+  .deck-frame__present {
+    opacity: 1;
+  }
+  .deck-frame:not([data-deck-continue]) .deck-frame__present {
+    padding: 0.4rem;
+  }
+  .deck-frame:not([data-deck-continue]) .deck-frame__present-label {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+  /* No hover: the ring is focus's alone. */
+  :root:not(.deck-presenting) .deck[data-deck-lines] .deck-frame:hover:not(:focus-visible, :has(:focus-visible)) .deck-stage {
+    box-shadow: var(--deck-stage-shadow);
+  }
+}
+
+/* The slide map (`installMap`): every frame as a numbered square, filled once
+   shown, outlined before, dotted when changed since; the frame to continue
+   at ringed, the one in view underlined. It sits at the deck's top and
+   stays under the header while the deck scrolls, a card over the frames
+   then. A frame a link to it lands on keeps its line clear of it. */
+.deck[data-deck-map] .deck-frame {
+  scroll-margin-block-start: calc(var(--deck-map-height, 0px) + 0.75rem);
+}
+.deck-map {
+  position: sticky;
+  inset-block-start: calc(var(--sl-nav-height) + var(--sl-mobile-toc-height, 0rem));
+  z-index: 3;
+  align-self: flex-start;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  max-width: 100%;
+  margin-block-end: -0.75rem;
+  padding: 0.4rem 0.5rem;
+  margin-inline-start: -0.5rem;
+  border-radius: 0.6rem;
+  background: var(--sl-color-bg);
+  font-size: var(--sl-text-sm);
+  line-height: 1;
+}
+.deck-map[data-stuck] {
+  box-shadow: var(--sl-shadow-md);
+}
+.deck-map__label {
+  flex: none;
+  color: var(--sl-color-gray-3);
+}
+/* A phone's line is short: the squares take the label's room, and the
+   label names the map to a screen reader alone. */
+@media (max-width: 30rem) {
+  .deck-map__label {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+}
+.deck-map__list {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: 0.25rem;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.deck-map__list[data-wrap] {
+  flex-wrap: wrap;
+}
+.deck-map__list > li {
+  display: flex;
+  margin: 0;
+  padding: 0;
+}
+.deck-map__slide {
+  position: relative;
+  box-sizing: border-box;
+  display: grid;
+  place-items: center;
+  min-width: 1.75rem;
+  height: 1.75rem;
+  padding-inline: 0.3rem;
+  border: 1px solid var(--sl-color-gray-5);
+  border-radius: 0.4rem;
+  color: var(--sl-color-gray-2);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  text-decoration: none;
+}
+.deck-map__slide:hover,
+.deck-map__slide:focus-visible {
+  border-color: var(--sl-color-accent);
+  color: var(--sl-color-text-accent);
+}
+.deck-map__slide:is([data-frame-state='shown'], [data-frame-state='changed']) {
+  border-color: transparent;
+  background: var(--sl-color-accent-low);
+  color: var(--sl-color-text-accent);
+}
+.deck-map__slide[data-frame-state='changed']::after {
+  content: '';
+  position: absolute;
+  inset-block-start: 0.2rem;
+  inset-inline-end: 0.2rem;
+  width: 0.35rem;
+  height: 0.35rem;
+  border-radius: 50%;
+  background: var(--sl-color-text-accent);
+}
+.deck-map__slide[data-deck-continue] {
+  border: 2px solid var(--sl-color-accent);
+  color: var(--sl-color-text-accent);
+}
+.deck-map__slide[aria-current='true']::before {
+  content: '';
+  position: absolute;
+  inset-inline: 0.15rem;
+  inset-block-end: -0.3rem;
+  height: 0.18rem;
+  border-radius: 0.1rem;
+  background: var(--sl-color-white);
+}
+.deck-map__gap > a {
+  display: grid;
+  place-items: center;
+  min-width: 1rem;
+  height: 1.75rem;
+  color: var(--sl-color-gray-3);
+  text-decoration: none;
+}
+.deck-map__gap > a:hover,
+.deck-map__gap > a:focus-visible {
+  color: var(--sl-color-text-accent);
+}
+:root:is(.deck-presenting, .deck-presenter-window) :is(.deck-frame__line, .deck-map),
+.deck[data-deck-static] :is(.deck-frame__line, .deck-map) {
+  display: none;
+}
+/* Forced colours drop shadows and paint backgrounds as the canvas: the
+   check, the dot and the bar under the frame in view keep the text's colour,
+   a square shown is filled with the system's highlight, and the ring round a
+   frame is an outline. */
+@media (forced-colors: active) {
+  :is(.deck-frame__state, .deck-actions__mark)[data-frame-state]::before,
+  .deck-actions__mark[data-frame-mark='changed']::before,
+  .deck-map__slide::before,
+  .deck-map__slide::after {
+    forced-color-adjust: none;
+    background: CanvasText;
+  }
+  .deck-frame__state[data-frame-state='unseen']::before {
+    background: none;
+  }
+  .deck-map__slide:is([data-frame-state='shown'], [data-frame-state='changed']) {
+    forced-color-adjust: none;
+    border-color: Highlight;
+    background: Highlight;
+    color: HighlightText;
+  }
+  .deck-map__slide[data-frame-state='changed']::after {
+    background: HighlightText;
+  }
+  .deck-map__slide[data-deck-continue] {
+    border-color: LinkText;
+  }
+  :root:not(.deck-presenting) .deck[data-deck-lines] .deck-frame:is(:hover, :focus-visible, :has(:focus-visible)) .deck-stage {
+    outline: 2px solid Highlight;
+  }
+}
+
+/* Present mode: one frame on the whole screen, letterboxed. */
+:root.deck-presenting {
+  overflow: hidden;
+}
+:root.deck-presenting :is(.header, .sidebar-pane, .right-sidebar-container, .pagination-links, .explico-site-footer, .lesson-breadcrumb, .explico-reading-notice, .explico-standalone-theme) {
+  display: none !important;
+}
+:root.deck-presenting .deck {
+  position: fixed;
+  inset: 0;
+  z-index: calc(var(--sl-z-index-navbar) - 1);
+  margin: 0;
+  gap: 0;
+  display: grid;
+  place-items: center;
+  background: #000;
+}
+:root.deck-presenting .deck-frame {
+  display: none;
+}
+:root.deck-presenting .deck-frame.is-current {
+  display: block;
+  width: min(100vw, calc(100vh * var(--deck-ratio, 1.7778)));
+}
+:root.deck-presenting .deck-stage {
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+}
+:root.deck-presenting .deck-notes {
+  display: none;
+}
+/* On one screen, the notes beside the frame (`N`). */
+:root.deck-presenting.deck-notes-open .deck-frame.is-current {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) min(30vw, 26rem);
+  align-items: center;
+  gap: 1.25rem;
+  width: 100vw;
+  padding-inline: 1.25rem;
+  box-sizing: border-box;
+}
+:root.deck-presenting.deck-notes-open .deck-frame.is-current .deck-notes {
+  display: block;
+  max-height: 90vh;
+  overflow: auto;
+  color: #eee;
+  background: #1a1a1a;
+}
+:root.deck-presenting.deck-blackout .deck-frame.is-current {
+  visibility: hidden;
+}
+
+/* The controls Present mode shows while the pointer moves. */
+.deck-hud {
+  display: none;
+}
+:root.deck-presenting .deck-hud {
+  position: fixed;
+  inset-inline: 0;
+  inset-block-end: 0;
+  z-index: calc(var(--sl-z-index-navbar) - 1);
+  display: flex;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.6rem;
+  opacity: 0;
+  transition: opacity 200ms ease-out;
+}
+:root.deck-presenting.deck-hud-visible .deck-hud,
+:root.deck-presenting .deck-hud:focus-within {
+  opacity: 1;
+}
+.deck-hud button,
+.deck-hud span {
+  padding: 0.3rem 0.7rem;
+  border: 1px solid #555;
+  border-radius: 0.4rem;
+  background: rgb(20 20 20 / 0.85);
+  color: #eee;
+  font: 600 0.85rem/1.2 var(--sl-font, system-ui);
+  font-variant-numeric: tabular-nums;
+}
+.deck-hud button {
+  cursor: pointer;
+}
+.deck-hud button:hover,
+.deck-hud button:focus-visible {
+  border-color: var(--sl-color-accent);
+}
+
+/* The presenter window (`?presenter`): this frame, the next, notes, clock. */
+:root.deck-presenter-window .deck-frame {
+  display: none;
+}
+:root.deck-presenter-window .deck {
+  position: fixed;
+  inset: 0;
+  z-index: calc(var(--sl-z-index-navbar) - 1);
+  margin: 0;
+  display: grid;
+  grid-template-columns: 3fr 2fr;
+  grid-template-rows: auto 1fr;
+  gap: 1rem;
+  padding: 1rem;
+  background: #111;
+  color: #eee;
+}
+:root.deck-presenter-window .deck-frame.is-current {
+  display: block;
+  grid-column: 1;
+  grid-row: 1 / span 2;
+}
+:root.deck-presenter-window .deck-frame.is-next {
+  display: block;
+  grid-column: 2;
+  grid-row: 1;
+  opacity: 0.85;
+}
+:root.deck-presenter-window .deck-frame.is-next .deck-notes {
+  display: none;
+}
+:root.deck-presenter-window .deck-frame.is-current .deck-notes {
+  display: block;
+  position: fixed;
+  inset-inline-end: 1rem;
+  inset-block-end: 3.5rem;
+  width: calc(40vw - 2rem);
+  max-height: 50vh;
+  overflow: auto;
+  background: #1a1a1a;
+  color: #eee;
+  font-size: 1.05rem;
+}
+.deck-clock {
+  display: none;
+}
+:root.deck-presenter-window .deck-clock {
+  position: fixed;
+  inset-inline-end: 1rem;
+  inset-block-end: 1rem;
+  z-index: calc(var(--sl-z-index-navbar) - 1);
+  display: block;
+  font: 600 1.3rem/1 var(--sl-font, system-ui);
+  font-variant-numeric: tabular-nums;
+  color: #eee;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .deck-step,
+  .deck-canvas .deck-spotlight,
+  .deck-hud {
+    transition: none;
+  }
+}
+
+/* Print: one frame a page, every step shown, notes under the frame only when
+   the course shows them to readers. */
+@media print {
+  /* The Present button and its links are the screen's (the deck's
+     standalone HTML keeps them; print never shows them). */
+  .deck-actions {
+    display: none !important;
+  }
+  @page deck-16-9 {
+    size: 13.333in 7.5in;
+    margin: 0;
+  }
+  @page deck-16-10 {
+    size: 12in 7.5in;
+    margin: 0;
+  }
+  @page deck-4-3 {
+    size: 10in 7.5in;
+    margin: 0;
+  }
+  .deck {
+    display: block;
+  }
+  .deck-frame {
+    page: deck-16-9;
+    break-after: page;
+    break-inside: avoid;
+  }
+  .deck[data-aspect='16:10'] .deck-frame {
+    page: deck-16-10;
+  }
+  .deck[data-aspect='4:3'] .deck-frame {
+    page: deck-4-3;
+  }
+  /* The canvas, 450 px tall, on a page 7.5 in (720 px) tall. */
+  .deck[data-deck-ready] .deck-stage {
+    width: calc(var(--deck-canvas-width, 800px) * 1.6);
+    height: 7.5in;
+    aspect-ratio: auto;
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+  }
+  .deck[data-deck-ready] .deck-canvas {
+    transform: scale(1.6);
+  }
+  .deck-step.is-future {
+    visibility: visible;
+    opacity: 1;
+  }
+  .deck-notes,
+  .deck-actions,
+  .deck-frame__line,
+  .deck-map {
+    display: none;
+  }
+}
+
+/* A deck in the sidebar: a filled 16:9 slide frame with a play mark cut out
+   of it, where a chapter is a sheet with lines of text and a part two
+   sheets. A chapter's deck is a smaller row under the chapter; a
+   slides-first lesson, whose deck is the lesson, is a lesson's row with the
+   glyph before its title, as the Overview row has its own. Once the
+   sidebar's script makes a lesson one row (`sidebar-editions.ts`), the deck
+   is the icon at its chapter row's end (`a.layout-edition-other`), or leads
+   the row and has no glyph. The glyph is the link's `::before`, a mask over
+   its own colour, so it takes the link's colour in every state and the
+   page's colour shows through the mark. The mark points right in either
+   reading direction, as a play control does. */
+:root {
+  --explico-deck-glyph: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2010'%3E%3Cpath%20fill='black'%20fill-rule='evenodd'%20d='M2%200h12a2%202%200%200%201%202%202v6a2%202%200%200%201-2%202H2a2%202%200%200%201-2-2V2a2%202%200%200%201%202-2ZM6.2%202.3v5.4L11%205Z'/%3E%3C/svg%3E");
+  --explico-part-deck-glyph: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2012'%3E%3Cpath%20fill='none'%20stroke='black'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'%20d='M3.3%200.75H14.1a1.15%201.15%200%200%201%201.15%201.15V8.4'/%3E%3Cpath%20fill='black'%20fill-rule='evenodd'%20d='M1.6%202.7h9.9a1.6%201.6%200%200%201%201.6%201.6v6a1.6%201.6%200%200%201-1.6%201.6H1.6A1.6%201.6%200%200%201%200%2010.3v-6a1.6%201.6%200%200%201%201.6-1.6ZM5.1%204.75v5.1L9.3%207.3Z'/%3E%3C/svg%3E");
+}
+:is(a.explico-deck-row, a.explico-deck-lesson, a.layout-edition-other[data-edition='slides']) {
+  --deck-glyph-start: var(--sl-sidebar-item-padding-inline, 0.5rem);
+}
+.sidebar-content :is(a.explico-deck-row, a.explico-deck-lesson),
+.layout-navigation-content :is(a.explico-deck-row, a.explico-deck-lesson) {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 0.45rem;
+}
+.sidebar-content a.explico-deck-row,
+.layout-navigation-content a.explico-deck-row {
+  --deck-glyph-start: 1.1rem;
+  padding-inline-start: var(--deck-glyph-start);
+  font-size: var(--sl-text-sm);
+}
+/* A part's deck is the part's own, as its Overview is: at the list's start,
+   its size and inset Starlight's own. The sidebar's script makes the two the
+   part's one row (`sidebar-editions.ts`), the deck its own row's lead or the
+   icon at Overview's end; without the script it is a row of its own. */
+.sidebar-content a.explico-deck-row.explico-part-deck,
+.layout-navigation-content a.explico-deck-row.explico-part-deck {
+  --deck-glyph-start: var(--sl-sidebar-item-padding-inline, 0.5rem);
+  padding-inline-start: revert-layer;
+  font-size: revert-layer;
+}
+.sidebar-content a.explico-part-deck,
+.layout-navigation-content a.explico-part-deck {
+  display: flex;
+  align-items: center;
+  gap: 0.45rem;
+}
+:is(a.explico-deck-row, a.explico-deck-lesson, a.layout-edition-other[data-edition='slides'])::before {
+  content: '';
+  flex: none;
+  width: 1rem;
+  height: 0.625rem;
+  background: currentColor;
+  -webkit-mask: var(--explico-deck-glyph) center / contain no-repeat;
+  mask: var(--explico-deck-glyph) center / contain no-repeat;
+}
+/* A part's deck is two frames: the deck's glyph in front, filled, with an
+   outlined frame behind it, as Overview is two sheets. It is the part's in
+   every place, so it carries its glyph in every state: its own row, the
+   icon at Overview's end, a tile. */
+a.explico-part-deck[data-edition='slides']::before {
+  content: '';
+  flex: none;
+  width: 1rem;
+  height: 0.75rem;
+  background: currentColor;
+  -webkit-mask: var(--explico-part-deck-glyph) center / contain no-repeat;
+  mask: var(--explico-part-deck-glyph) center / contain no-repeat;
+}
+/* Forced colours paint a background as the canvas: the glyph keeps its
+   link's colour, the system's link colour then. */
+@media (forced-colors: active) {
+  :is(a.explico-deck-row, a.explico-deck-lesson, a.layout-edition-other[data-edition='slides'], a.explico-part-deck)::before {
+    forced-color-adjust: none;
+    background: currentColor;
+  }
+}
+@media (min-width: 50rem) {
+  /* A tile, whatever its place in the row: the glyph centred, a little
+     larger. A deck that leads its row has no class of its own, so the tile
+     draws it from `data-edition`. */
+  .layout-compact-sidebar details[data-compact] > ul:not(.top-level) > li > a[data-edition='slides'] {
+    padding-inline-start: 0;
+  }
+  /* As specific as a chapter tile's sheet (`global.css`), which it replaces. */
+  .layout-compact-sidebar details[data-compact] > ul:not(.top-level) > li > a[data-edition='slides']::before {
+    width: 1.1rem;
+    height: 0.69rem;
+    -webkit-mask: var(--explico-deck-glyph) center / contain no-repeat;
+    mask: var(--explico-deck-glyph) center / contain no-repeat;
+  }
+
+  .layout-compact-sidebar details[data-compact] > ul:not(.top-level) > li > a.explico-part-deck[data-edition='slides']::before {
+    width: 1.15rem;
+    height: 0.86rem;
+    -webkit-mask: var(--explico-part-deck-glyph) center / contain no-repeat;
+    mask: var(--explico-part-deck-glyph) center / contain no-repeat;
+  }
+
+  /* A part's deck is the part's own, as its Overview is: its tile takes the
+     accent the Overview tile takes (`global.css`). The sidebar's script
+     joins the two as a lesson's pair (`li[data-editions='pair']`), and both
+     keep the accent beside the open one, where a lesson's tile turns grey.
+     Without the script the deck's tile joins no other. */
+  .layout-compact-sidebar details[data-compact] > ul:not(.top-level) > li > a.explico-part-deck {
+    color: var(--sl-color-text-accent);
+    border-color: var(--sl-color-text-accent);
+  }
+  .layout-compact-sidebar details[data-compact] > ul:not(.top-level) > li > a.explico-part-deck[aria-current='page'] {
+    color: var(--sl-color-text-invert);
+  }
+  .layout-compact-sidebar
+    details[data-compact]
+    > ul:not(.top-level)
+    > li[data-editions='pair']
+    > a[data-part-edition][aria-current='page']
+    + a.layout-edition-other[data-part-edition]:not(:hover, :focus-visible) {
+    color: var(--sl-color-text-accent);
+  }
+
+  /* A chapter's tile and its deck's tile touch, as one pair. The deck's tile
+     takes back the list's gap and lies over the chapter's last pixel, its own
+     border clear there, so the line between them is the chapter's border, and
+     the corners where they meet are square. That line takes the colour of
+     whichever tile is lit; the open page's tile is outlined in accent, so its
+     fill and the line read as one. Every rule needs `:has()`: a browser
+     without it keeps the two tiles apart, as before. This is the sidebar as
+     the compiler wrote it, one item per edition; the sidebar's script puts a
+     lesson's two links in one item, joined the same way by
+     `li[data-editions='pair']` (`global.css`), and these rules then match
+     nothing. */
+  .layout-compact-sidebar details[data-compact] > ul:not(.top-level) > li:has(> a.explico-deck-row:not(.explico-part-deck)) {
+    margin-inline-start: calc(-0.35rem - 1px);
+  }
+  .layout-compact-sidebar details[data-compact] > ul:not(.top-level) > li:has(> a.explico-deck-row:not(.explico-part-deck)) > a.explico-deck-row {
+    border-inline-start-color: transparent;
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+    background-clip: padding-box;
+  }
+  .layout-compact-sidebar details[data-compact] > ul:not(.top-level) > li:has(+ li > a.explico-deck-row:not(.explico-part-deck)) > a {
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
+  /* A covered tile keeps its tint under a pointer (`global.css`), so its line does too. */
+  .layout-compact-sidebar details[data-compact] > ul:not(.top-level) > li:has(+ li:not([data-covered]) > a.explico-deck-row:not(.explico-part-deck):is(:hover, :focus-visible)) > a {
+    border-inline-end-color: var(--sl-color-accent);
+  }
+  .layout-compact-sidebar details[data-compact] > ul:not(.top-level) > li:has(+ li > a.explico-deck-row:not(.explico-part-deck)) > a[aria-current='page'],
+  .layout-compact-sidebar details[data-compact] > ul:not(.top-level) > li:has(> a.explico-deck-row:not(.explico-part-deck)) > a.explico-deck-row[aria-current='page'] {
+    border-color: var(--sl-color-text-accent);
+  }
+  .layout-compact-sidebar details[data-compact] > ul:not(.top-level) > li:has(+ li > a.explico-deck-row:not(.explico-part-deck)[aria-current='page']) > a {
+    border-inline-end-color: var(--sl-color-text-accent);
+  }
+}
+
+/* A figure on a frame is the frame's picture (rule D7). A lab's tools stand
+   beside its picture rather than folded under its caption, so a lab and its
+   sliders share the frame's width, as a wide screen has room for. */
+.deck[data-deck-ready] .deck-canvas .keyed-figure {
+  margin: 0;
+}
+.deck[data-deck-ready] .deck-canvas .keyed-figure[data-fig-tools] {
+  display: grid;
+  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
+  grid-template-rows: auto auto;
+  grid-template-areas:
+    'body tools'
+    'caption tools';
+  align-items: start;
+  column-gap: 22px;
+}
+.deck[data-deck-ready] .deck-canvas .keyed-figure[data-fig-tools] > .keyed-figure__body {
+  grid-area: body;
+  min-width: 0;
+}
+.deck[data-deck-ready] .deck-canvas .keyed-figure[data-fig-tools] > figcaption {
+  grid-area: caption;
+}
+.deck[data-deck-ready] .deck-canvas .keyed-figure[data-fig-tools] > .keyed-figure__tools-fold {
+  grid-area: tools;
+  min-width: 0;
+  margin: 0;
+  font-size: 0.8em;
+}
+.deck-canvas :is(.keyed-figure__tools-summary, .keyed-figure__tools-stub, .keyed-figure__tools-toggle) {
+  display: none !important;
+}
+.deck-canvas .keyed-figure__caption,
+.deck-canvas .keyed-table__caption,
+.deck-canvas .diagram figcaption {
+  font-size: 0.68em;
+  line-height: 1.35;
+}
+
+/* A question frame: the check's label, then its runner. */
+.deck-canvas .deck-check__label {
+  margin: 0 0 0.4em;
+  font-size: 0.75em;
+  color: var(--deck-muted);
+}
+.deck-canvas .deck-check__kind {
+  font-weight: 650;
+  color: var(--deck-accent);
+}
+
+/* A step with nothing to show (a driven figure, a spotlight) takes no room. */
+.deck-canvas .deck-step:empty {
+  display: none;
+}