@media screen {
  /* Framework */
  html {
    height: 100%;
  }

  body {
    margin: 0;
    padding: 0;

    height: 100%;
    height: 100vh;

    overflow: hidden;

    background: rgb(215, 215, 215);
    background: -o-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
    background: -moz-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
    background: -webkit-radial-gradient(rgb(240, 240, 240), rgb(190, 190, 190));
    background: -webkit-gradient(
      radial,
      50% 50%,
      0,
      50% 50%,
      500,
      from(rgb(240, 240, 240)),
      to(rgb(190, 190, 190))
    );

    -webkit-font-smoothing: antialiased;
  }

  /* The width of the source panel of -doc, which the slides make room
     for while it is open. */
  html {
    --source-width: 0px;
  }
  html.source-open {
    --source-width: min(45vw, 720px);
  }

  .slides {
    width: calc(100% - var(--source-width));
    height: 100%;
    left: 0;
    top: 0;

    position: absolute;

    /* The width of the window that the slides are shown in. */
    --window-width: calc(100dvw - var(--source-width));

    /* The slide size, and the margin around it at the closest window
       edges. */
    --slide-width: 900px;
    --slide-height: 700px;
    --slide-margin: 20px;

    /* Scale window */
    --slide-scale: min(
      tan(atan2(var(--window-width), var(--slide-width) + 2 * var(--slide-margin))),
      tan(atan2(100dvh, var(--slide-height) + 2 * var(--slide-margin)))
    );
    transform: scale(var(--slide-scale));

    /* Half the window width, in unscaled slide pixels. */
    --half-window: calc(var(--window-width) / 2 / var(--slide-scale));

    /* The distance between slide centres. It puts the previous and next
       slide just outside the window, so only the background shows beside
       the current one. */
    --slide-step: calc(
      var(--half-window) + var(--slide-width) / 2 + var(--slide-margin)
    );
  }
  .slides.layout-widescreen,
  .slides.layout-faux-widescreen {
    --slide-width: 1100px;
  }

  /* In the presenter notes window, the previous and next slide show
     beside the current one, 30px away. */
  .presenter-view .slides {
    --slide-step: calc(var(--slide-width) + 30px);
  }

  .slides > article {
    display: block;

    position: absolute;
    overflow: hidden;

    width: var(--slide-width);
    height: var(--slide-height);

    left: 50%;
    top: 50%;

    margin-left: calc(var(--slide-width) / -2);
    margin-top: calc(var(--slide-height) / -2);

    padding: 30px 45px;

    box-sizing: border-box;
    -o-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;

    border-radius: 10px;
    -o-border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;

    background-color: white;

    border: 1px solid rgba(0, 0, 0, 0.3);

    transition: transform 0.3s ease-out;
    will-change: transform;
  }
  .slides.layout-faux-widescreen > article {
    padding: 40px 160px;
  }

  .slides.layout-widescreen > article:not(.nobackground):not(.biglogo),
  .slides.layout-faux-widescreen > article:not(.nobackground):not(.biglogo) {
    background-position-x: 0, 840px;
  }

  /* Clickable/tappable areas, from each window edge to 50px into the
     current slide. */

  .slide-area {
    z-index: 1000;

    position: absolute;
    width: calc(var(--half-window) - var(--slide-width) / 2 + 50px);
    height: var(--slide-height);

    left: 50%;
    top: 50%;

    cursor: pointer;
    margin-top: calc(var(--slide-height) / -2);

    tap-highlight-color: transparent;
    -o-tap-highlight-color: transparent;
    -moz-tap-highlight-color: transparent;
    -webkit-tap-highlight-color: transparent;
  }
  #prev-slide-area {
    margin-left: calc(-1 * var(--half-window));
  }
  #next-slide-area {
    margin-left: calc(var(--slide-width) / 2 - 50px);
  }

  /* Slides */

  .slides > article {
    display: none;
  }
  .slides > article.far-past {
    display: block;
    transform: translateX(calc(-2 * var(--slide-step)));
  }
  .slides > article.past {
    display: block;
    transform: translateX(calc(-1 * var(--slide-step)));
  }
  .slides > article.current {
    display: block;
    transform: translateX(0);
  }
  .slides > article.next {
    display: block;
    transform: translateX(var(--slide-step));
  }
  .slides > article.far-next {
    display: block;
    transform: translateX(calc(2 * var(--slide-step)));
  }
  .slides > article:is(.far-past, .past, .current, .next, .far-next):has(> .image, > .fontsize > .image) {
    display: flex;
  }
}

@media print {
  /* Set page layout */
  @page {
    size: A4 landscape;
  }

  .slides > article {
    display: block;

    position: relative;

    page-break-inside: never;
    page-break-after: always;

    overflow: hidden;

    aspect-ratio: 1100 / 700;
    box-sizing: border-box;
    padding: 30px 45px;
  }
  .slides.layout-faux-widescreen > article {
    padding: 40px 160px;
  }

  /* Images are fitted to the slide, so it needs flex layout. */
  .slides > article:has(> .image, > .fontsize > .image) {
    display: flex;
  }

  h2 {
    position: static !important;
    margin-top: 400px !important;
    margin-bottom: 100px !important;
  }

  div.code,
  pre:not(div.code pre, div.output pre) {
    background: rgb(240, 240, 240);
  }

  #help {
    display: none;
    visibility: hidden;
  }

  .no-print,
  .no-print *,
  .buttons {
    display: none !important;
  }
}

/* Styles for slides */

.slides > article {
  font-family: 'Roboto', Arial, sans-serif;
  font-weight: 350;

  color: black;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);

  /* The size that .fontsize sizes are relative to, and goes back to. */
  --font-size-default: 26px;
  font-size: var(--font-size-default);
  line-height: 36px;
  letter-spacing: -1px;
}

b {
  font-weight: 600;
}

a {
  color: rgb(0, 102, 204);
  text-decoration: none;
}
a:visited {
  color: rgba(0, 102, 204, 0.75);
}
a:hover {
  color: black;
}

p {
  margin: 0;
  padding: 0;

  margin-top: 20px;
}
p:first-child {
  margin-top: 0;
}

h1 {
  font-size: 60px;
  line-height: 60px;

  padding: 0;
  margin: 0;
  margin-top: 200px;
  margin-bottom: 5px;
  padding-right: 40px;
  font-weight: 600;
  letter-spacing: -2px;
  color: rgb(51, 51, 51);
}

h2 {
  font-size: 45px;
  line-height: 45px;
  position: absolute;
  bottom: 150px;
  padding: 0;
  margin: 0;
  padding-right: 40px;
  font-weight: 600;
  letter-spacing: -1.5px;
  color: rgb(51, 51, 51);
}

h3 {
  font-size: 30px;
  line-height: 36px;
  padding: 0;
  margin: 0;
  padding-right: 40px;
  font-weight: 600;
  letter-spacing: -1.3px;
  color: rgb(51, 51, 51);
}

/* Subsection headings within a slide. */
h4 {
  font-size: 26px;
  line-height: 36px;
  padding: 0;
  margin: 0;
  margin-top: 20px;
  font-weight: 600;
  color: rgb(51, 51, 51);
}
h4:first-child {
  margin-top: 0;
}

ul {
  margin: 0;
  padding: 0;
  margin-top: 20px;
  margin-left: 1.5em;
}
li {
  padding: 0;
  margin: 0 0 0.5em 0;
}

pre {
  margin: 0;
  padding: 0;

  font-family: 'JetBrains Mono', 'Courier New', monospace;
  /* Show code as typed: no ligatures such as != drawn as one sign. */
  font-variant-ligatures: none;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -1px;

  color: black;
}

/* The code box. It goes on the div.code around .code and .play blocks,
   not on the pre inside, so that it also holds lines typed into an
   editable block. Markdown code blocks are a bare pre and get the box
   themselves. */
div.code,
pre:not(div.code pre, div.output pre) {
  padding: 5px 10px;
  margin-top: 20px;
  margin-bottom: 20px;
  overflow: hidden;

  background: rgb(240, 240, 240);
  border: 1px solid rgb(224, 224, 224);
}

pre.numbers span:before {
  content: attr(num);
  margin-right: 1em;
  display: inline-block;
}

code {
  font-size: 95%;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-variant-ligatures: none;

  color: black;
}

pre code {
  font-size: 100%;
}

/* A key, drawn as a keycap in the colours of the code box. */
kbd {
  display: inline-block;
  padding: 0 0.35em;
  margin: 1px 0;
  font-family: inherit;
  font-size: 90%;
  line-height: 1.4;
  white-space: nowrap;

  background: rgb(240, 240, 240);
  border: 1px solid rgb(204, 204, 204);
  border-bottom-width: 2px;
  border-radius: 4px;
}

/* The elements after a .fontsize command, in the font-size it sets. The
   wrapper leaves the layout to the slide, and the sizes of code and
   subsection headings follow the text's, as they are at the default 26px. */
.fontsize {
  display: contents;
  line-height: 1.385; /* 36px */
  letter-spacing: -0.038em; /* -1px */
}
.fontsize pre {
  font-size: 0.692em; /* 18px */
  line-height: 1.333; /* 24px */
}
.fontsize h4 {
  font-size: 1em;
}
/* The wrapper is never the first thing on a slide, so neither is its
   first child. */
.fontsize > p:first-child,
.fontsize > h4:first-child {
  margin-top: 20px;
}

article > .image,
article > .video,
article > .fontsize > .image,
article > .fontsize > .video {
  text-align: center;
  margin-top: 40px;
}

/* A slide fits each image into the space left for it, keeping its aspect
   ratio. The .image command can limit the size with fractions of the
   slide's content area and with pixels, which the template passes on as
   --image-width-frac, --image-height-frac, --image-width and
   --image-height.

   The img is a flex item of the slide itself. Its height starts as its
   width divided by its aspect ratio, and shrinks to the space left on the
   slide; object-fit then centres the image in the narrower box that leaves.
   Either way the box is as tall as the image, so a caption follows it. */
.slides > article:has(> .image, > .fontsize > .image) {
  flex-direction: column;
}
:is(.slides > article, .slides > article > .fontsize) > .image {
  display: contents;
}
:is(.slides > article, .slides > article > .fontsize) > .image > img {
  flex: 0 1 auto;
  min-height: 0;
  width: min(
    var(--image-width-frac, 1) * 100%,
    var(--image-width, 1e6) * 1px
  );
  height: auto;
  max-height: min(
    var(--image-height-frac, 1) * 100%,
    var(--image-height, 1e6) * 1px
  );
  align-self: center;
  margin-top: 40px;
  object-fit: contain;
}

/* Why an image could not be made from its diagram source. It takes the
   image's place if there is no earlier rendering; otherwise the earlier
   rendering is shown, and the error only in the presenter notes window
   (and, with -hot, by hot.js). */
.image-error {
  margin-top: 40px;
  padding: 5px 10px;

  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: 0;
  white-space: pre-wrap;
  text-align: left;
  text-shadow: none;

  color: white;
  background: rgb(190, 30, 30);
}
.image-error.stale {
  display: none;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  margin: 0;
}
.presenter-view .image-error.stale {
  display: block;
}

article.background {
  background-size: contain;
  background-repeat: round;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 40px;
}
td,
th {
  border-bottom: 1px solid rgb(224, 224, 224);
  padding: 5px 10px;
  vertical-align: top;
}
th {
  font-weight: 600;
  text-align: left;
  border-bottom: 2px solid rgb(204, 204, 204);
}

p.link {
  margin-left: 20px;
}

.pagenumber {
  color: #8c8c8c;
  font-size: 75%;
  position: absolute;
  bottom: 0px;
  right: 10px;
}

/* Code */
div.code,
div.code pre {
  outline: 0px solid transparent;
}
div.playground {
  position: relative;
}
div.output {
  position: absolute;
  left: 50%;
  top: 50%;
  right: 40px;
  bottom: 40px;
  background: #202020;
  padding: 5px 10px;
  z-index: 2;

  border-radius: 10px;
  -o-border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}
div.output pre {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  width: 100%;
  height: 100%;
  overflow: auto;
  /* Lines longer than the panel can grow to wrap, see fit in play.ts. */
  white-space: pre-wrap;
}
div.output .stdout,
div.output pre {
  color: #e6e6e6;
}
div.output .stderr,
div.output .error {
  color: rgb(255, 200, 200);
}
div.output .system,
div.output .exit {
  color: rgb(255, 230, 120);
}
/* The Run button after a code box, moved up into its bottom right corner.
   The float has no height so that it takes no room: otherwise it would
   narrow the code box of a .play block that follows. */
.buttons {
  position: relative;
  float: right;
  height: 0;
  top: -60px;
  right: 10px;
}
div.output .buttons {
  position: absolute;
  float: none;
  height: auto;
  top: auto;
  right: 5px;
  bottom: 5px;
}

/* Presenter details */
.presenter {
  margin-top: 20px;
}
.presenter p,
.presenter .link {
  margin: 0;
  font-size: 28px;
  line-height: 1.2em;
}

/* Output resize details */
.resize-handle {
  position: absolute;
  touch-action: none;
}
.resize-n {
  cursor: n-resize;
  height: 7px;
  width: 100%;
  top: -5px;
  left: 0;
}
.resize-w {
  cursor: w-resize;
  width: 7px;
  left: -5px;
  top: 0;
  height: 100%;
}
.resize-nw {
  cursor: nw-resize;
  width: 9px;
  height: 9px;
  left: -5px;
  top: -5px;
}
iframe {
  border: none;
}
figcaption {
  color: #666;
  text-align: center;
  font-size: 0.75em;
}

#help {
  font-family: 'Roboto', Arial, sans-serif;
  text-align: center;
  color: white;
  background: #000;
  opacity: 0.5;
  position: fixed;
  bottom: 25px;
  left: 50px;
  right: 50px;
  padding: 20px;

  border-radius: 10px;
  -o-border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

/* The error that hot.js shows, with -hot, when the page no longer
   renders or a diagram could not be rendered. */
#hot-error {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  margin: 0;
  padding: 12px 20px;
  max-height: 40vh;
  overflow: auto;

  font: 14px/1.4 'JetBrains Mono', monospace;
  white-space: pre-wrap;

  color: #fff;
  background: #b00020;
}

/* The source panel of -doc, which shows the source of the current slide. */

#source {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2000;
  box-sizing: border-box;
  width: var(--source-width);
  overflow: auto;
  padding: 0 20px 20px;

  font-family: 'Roboto', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: black;
  background: white;
  border-left: 1px solid rgba(0, 0, 0, 0.3);
}
.source-open #source {
  display: block;
}

#source .src-title {
  position: sticky;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0 10px;
  font-size: 16px;
  font-weight: bold;
  background: white;
}
#source .src-title span {
  font-size: 12px;
  font-weight: normal;
  color: rgb(120, 120, 120);
}

#source .src-name {
  margin-bottom: 6px;
}

#source h4 {
  margin: 20px 0 8px;
  font-size: 14px;
}

#source pre {
  margin: 0;
  padding: 10px 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  tab-size: 4;
  background: rgb(240, 240, 240);
  border-radius: 6px;
}

/* Lines with their numbers, which are left out when the lines are copied. */
#source .src-lines {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 12px;
}
#source .src-n {
  text-align: right;
  color: rgb(150, 150, 150);
  user-select: none;
}

/* The parts of present markup. */
#source .src-heading {
  font-weight: bold;
  color: rgb(0, 102, 204);
}
#source .src-command {
  color: rgb(160, 30, 110);
}
#source .src-note {
  color: rgb(20, 120, 50);
}
#source .src-comment {
  color: rgb(120, 120, 120);
  font-style: italic;
}

#source .src-file {
  margin: 0 0 8px;
}
#source summary {
  margin-bottom: 6px;
  cursor: pointer;
}