/* Style for W3C slides to be used together with the Shower script or
   the b6+ script.

   For usage instructions, see
   https://www.w3.org/Talks/Tools/shower3.html (for Shower) or
   https://www.w3.org/Talks/Tools/b6plus.html (for b6+).

   This is an improved version of the TPAC 2018 style. It reduces
   the risk of differences between list mode and slide mode, by using
   the same base font size (viz., the user's default font size) in
   both modes. Slides in slide mode are linearly scaled up versions of
   the slides in list mode. Especially images, even without an explicit
   size set in em, should now look the same. (But it is still
   recommended to set their size in em, to avoid differences when
   viewed by users with a different base font size.)

   TODO: Styles for tables? blockquotes?

   +---------------------------------------+-------+
   |                   1em                 |       |
   |   +-------------------------------+   |       |
   |   |                               |   |       |  ^
   |   |                               |   |       |  |
   |1em|                               |1em| 5.5em | 23em
   |   |                               |   |       |  |
   |   |                               |   |       |  v
   |   +-------------------------------+   |       |
   |                   1em                 | LOGO  |
   +---------------------------------------+-------+

   A = 16/9  = aspect ratio
   N = 23    = height in rem (i.e., 21 lines + 2 x 1 rem padding)
   L = 5.5   = logo width in rem
   H = 1     = logo aspect ratio (width/height)
   C = 2     = font size (and logo size) multiplier for cover pages
   w = N*A   = width of slide in rem

   TODO: Find out why the "rightin" animation work in b6+ but not in
   Shower3. The translate(100%,0) is executed, but the viewport is
   constantly recentered on the slide instead of staying on the body
   element. It works when the body has 'direction: rtl'.

   Created: 25 June 2021
   Author: Bert Bos <bert@w3.org>

   Copyright © 2021-2025 World Wide Web Consortium (W3C Inc, European
   Research Consortium for Informatics and Mathematics, Keio
   University, Beihang). All Rights Reserved. This work is distributed
   under the W3C® Software License[1] in the hope that it will be
   useful, but WITHOUT ANY WARRANTY; without even the implied warranty
   of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.

   [1] http://www.w3.org/Consortium/Legal/copyright-software
*/

@font-face {
  font-family: My Gill Sans;
  font-style: normal;
  font-weight: normal;
  src: url(Gill_Sans.eot) format("embedded-opentype"),
    url(Gill_Sans.woff) format("woff")}

@font-face {
  font-family: My Gill Sans;
  font-style: normal;
  font-weight: bold;
  src: url(Gill_Sans_Bold.eot) format("embedded-opentype"),
    url(Gill_Sans_Bold.woff) format("woff")}

@font-face {
  font-family: My Gill Sans;
  font-style: oblique;
  font-weight: bold;
  src: url(Gill_Sans_Bold_Italic.eot) format("embedded-opentype"),
    url(Gill_Sans_Bold_Italic.woff) format("woff")}

@font-face {
  font-family: My Gill Sans;
  font-style: oblique;
  font-weight: normal;
  src: url(Gill_Sans_Italic.eot) format("embedded-opentype"),
    url(Gill_Sans_Italic.woff) format("woff")}

@font-face {
  font-family: My Gill Sans;
  font-style: normal;
  font-weight: 300;
  src: url(Gill_Sans_Light.eot) format("embedded-opentype"),
    url(Gill_Sans_Light.woff) format("woff")}

@font-face {
  font-family: My Gill Sans;
  font-style: oblique;
  font-weight: 300;
  src: url(Gill_Sans_Light_Italic.eot) format("embedded-opentype"),
    url(Gill_Sans_Light_Italic.woff) format("woff")}

@font-face {
  font-family: My Gill Sans;
  font-style: normal;
  font-weight: 600;
  src: url(Gill_Sans_SemiBold.eot) format("embedded-opentype"),
    url(Gill_Sans_SemiBold.woff) format("woff")}

@font-face {
  font-family: My Gill Sans;
  font-style: oblique;
  font-weight: 600;
  src: url(Gill_Sans_SemiBold_Italic.eot) format("embedded-opentype"),
    url(Gill_Sans_SemiBold_Italic.woff) format("woff")}

@font-face {
  font-family: My Gill Sans;
  font-style: normal;
  font-weight: 900;
  font-weight: 1000;
  src: url(Gill_Sans_UltraBold.eot) format("embedded-opentype"),
    url(Gill_Sans_UltraBold.woff) format("woff")}

@font-face {
  font-family: LeagueGothicRegular;
  src: url(League_Gothic-webfont.woff) format('woff');
  font-weight: normal;
  font-style: normal}


/* Common layout independent of slide mode */
body {background: url(../../Icons/linen.png) #595b60; counter-reset: slide; margin: 2em;
  color: white}
body .slide h1, body .slide h2 {all: unset; display: block;
  font: 2em/1.1 League Gothic, LeagueGothicRegular,
  sans-serif;
  letter-spacing: 0.03em; margin: 0 0 0.3em 0;
  color: #015ca4}
.slide h3 {font-size: 1.17em; margin: 1em 0}
/* Computing the scaling doesn't work with em, needs rem :-( */
.full, .slide {width: 40.889rem; /*= w */ height: 23rem; /*= N */}
.slide {font: 1rem/1.3 Gill Sans MT, Gill Sans, My Gill Sans,
  Liberation Sans, DejaVu Sans, sans-serif; font-size-adjust: 0.45;
  font-variant-numeric: oldstyle-nums tabular-nums}
.slide {color: black; box-shadow: 0 0.4em 0.6em #000; line-height: 1.6;
  padding: 1em 6.5em /*= L + 1 */ 1em 1em; position: relative;
  box-sizing: border-box; z-index: 0; display: inline-block;
  margin: 4em 2em 0 0; vertical-align: bottom; counter-increment: slide;
  border-radius: 0.5em;
  text-shadow: 0 0 1px white, 0 0 1px white, 0 0 1px white;
  background: 36.389em /*= w - L + 1 */ 18.5em /*= N - L/H + 1 */
    / 3.5em /*= L - 2 */ auto url(../../Icons/W3C-circle.png) no-repeat,
    bottom right / 5.5em /*= L */ 100% url(../../Icons/ramp.png) no-repeat
    #fff;
  background: 36.389em /*= w - L + 1 */ 18.5em /*= N - L/H + 1 */
    / 3.5em /*= L - 2 */ auto url(../../Icons/W3C-circle.svg) no-repeat,
    bottom right / 5.5em /*= L */ 100%
    linear-gradient(hsl(211,45%,25%), hsl(205,42%,92%)) no-repeat #fff}
.slide:target {outline: lime solid 0.5em; outline-offset: 1em}

/* Lists with blue squares as list bullets, and less indented */
.slide ul, .slide ol {padding-left: 0}
.slide ul > li {margin-left: 1em; list-style: none}
.slide ul > li::before {content: "\25A0"; display: inline-block; width: 1em;
  margin-left: -1em; color: #015ca4}
.slide ol > li {margin-left: 2em}
.slide li ul, .slide li ol {margin: 0}

/* Slides with a image on the left (.side) or right (.side.right) one third */
.slide.side {padding-left: 11.717em /*= (w - 1 - (L + 1) - 1) * 30% + 2 */}
.slide.side.right, .slide.side.r {padding-left: 1em;
  padding-right: 17.217em; /*= (w - 1 - (L + 1) - 1) * 30% + (L + 1) + 1 */}
.slide.side .side {position: absolute; top: 4.3478% /*= 1/N */;
  left: 2.4457%; /*= 1/w */
  max-height: 91.304% /*= (N - 2)/N */; object-fit: contain;
  width: 23.764%; /*= (w - 1 - (L + 1) - 1) * 30%  / w */}
.slide.side.right .side, .slide.side.r .side {
  left: 59.606% /*= ((w - L) * 70% - 40%)/w */}
@supports (transform: translate(-50%,-50%)) {
  .slide.side .side {top: 50%; transform: translate(-50%,-50%);
    left: 14.327%; /*= ((w - 1 - (L + 1) - 1) * 30% / 2 + 1 ) / w */}
  .slide.side.right .side, .slide.side.r .side {
    left: 72.221% /*= ((w - L - 1) * 85% + 30%) / w */}
}

/* Slides with a big image on the left or right two-thirds */
.slide.side.big {padding-left: 22.729em /*= (w - L - 3) * 64% + 2 */}
.slide.side.right.big, .slide.side.r.big {padding-left: 1em;
  padding-right: 28.229em /*= (w - L - 3) * 64% + L + 2 */}
.slide.side.big .side {width: 50.696% /*= (w - L - 3) * 64% / w */}
.slide.side.big.right .side, .slide.side.big.r .side {
  left: 33.408% /*= (1 + (w - L - 3) * (100% - 64%) + 1)/w */}
@supports (transform: translate(-50%,-50%)) {
  .slide.side.big .side {left: 27.793% /*= ((w - L - 3) * 64%/2 + 1) / w */}
  .slide.side.big.right .side, .slide.side.big.r .side {
    left: 58.755% /*= (1 + (w - L - 3) * (100% - 64%/2) + 1)/w */}
}

/* Notes in a smaller font */
.slide .note {all: unset; font-size: 80%}

/* EM elements get a highlighter-like background */
.slide em {font-style: normal;
  background: 0 0 / 100% 100% url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKgAAAAfCAMAAABEWnZLAAAAe1BMVEUAAADM/0L////M/0L////M/0LM/0L////M/0L0/9n////M/0LM/0LM/0Ll/6D////M/0LM/0LW/2fM/0Le/4b////M/0Ld/4H////M/0LX/23M/0La/3j////M/0LM/0LS/1nV/2XY/3Hb/33l/6Dv/8Py/8/4/+f////ILR5EAAAAH3RSTlMADw8fHy8/P09PT19vf39/j5+fr6+vv7+/z8/f39/vM0RnFwAAAfxJREFUGBnNwYlW2zAQBdBxVU9E5Qd21T6qimpouvH/X1g7G0lIIIcszr3yCqfaIHIuAmhUVa6H0waRyfYqbBG0lhG50NIOVhgRVC6ubrO9R45QOb1K11Sy4rMdLXFNh01e92iwEDmTbVtGJbtVipjtKhSill2comOx0ZEEvFbyQqUBkTamxA7wqrXOeAxa9iDPnAas67JdCTZOtjnVgJmWNrJMEvC17NLQjsK5Drs1+hY5HGKyEymci1jwulTLTk4DEMlkc6ULTtZVGtCRNo7MCFQi4tBxTQvAqzxzMdupZbKYWeFSyXzh8/2X29vJfncrn+TjZObm9v5h+mgL0+l30s7r5/TZr98Lf/4O/j09/fg2+HrXm0wmH2Tlw2Tl5mH6aOPLJCMAr5XsUqHYdUhkBLw62akBdMaDxc4jkYyRJLZ5nanlUHVoaZdBMgLwqk4OUOkgoBeZ7XQSex2WOq7LtiW1jZN9asRkZ1RItgCC9mp5L42kLWUy2UXwJWwJ6kRqVS/bVANo4ypkBIJqJVIh2SCxa2SmDmCycWT20FNVJxs0cgBoLSJVE+2yCnsAgqq8otYealnRgJYbsIULxc4pk8y2gY2Td/Ftsgth16gcRdElO5/CiEadnIjTBpHZTiOTbAGvWsm51B6DyF6xNyUOIgaNDmQ8TneSI/0HxFmNoHHqWWQAAAAASUVORK5CYII=)}

/* Miscellaneous styles */
.slide img {max-width: 100%}
.slide .num {font-variant-numeric: oldstyle-nums tabular-nums
  diagonal-fractions}
.slide code, .slide pre {font-family: Andale Mono, Courier, monospace}
.slide code {background: #eee; padding: 0.1em 0.3em; border-radius: 0.3em}
.slide pre code {background: none; padding: 0; font: inherit} /* Reset */
sub, sup {line-height: 0.5}
.slide pre {padding: 0 0.2em; background: black; color: hsl(120,100%,70%);
  text-shadow: none}

/* Cover pages */
.slide.cover {text-align: right;
  background-position: 33.639em /*= w - C * L + 1 + L/2 */
    18.5em /*= N - L/H + 1 */, bottom right;
  background-size: 3.5em /*= L - 2 */ auto, 11em /*= C * L */ 100%;
  padding-right: 12em /*= C * L + 1 */}
.slide.cover address {font-family: Garamond Premier Pro, Garamond, serif;
  line-height: 1.3; font-size: 2em /*= C * 1 */;
  position: absolute; bottom: 4.3478% /*= 1/N */;
  left: 2.4457% /*= 1/w */; right: 29.348% /*= (C * L + 1)/w */}
.slide.cover h1, .slide.cover h2 {font-size: 4em; /*= C * 2 */}

/* Explicit placement on a 3x3 grid */
.slide .place {position: absolute; box-sizing: border-box;
  max-width: 25.589%; /*= (w - 1 - (L + 1) - 2) / 3 / w */
  top: 50%; left: 43.274%; /*= ((w - 1 - (L + 1)) / 2 + 1) / w */
  transform: translate(-50%, -50%); text-align: center}
.slide .place.t, .slide .place.top {top: 4.3478%; /*= 1/N */
  transform: translate(-50%,0)}
.slide .place.b, .slide .place.bottom {top: auto; bottom: 4.3478% /*= 1/N */;
  transform: translate(-50%,0)}
.slide .place.l, .slide .place.left {left: 2.4457%; /*= 1/w*/
  transform: translate(0,-50%); text-align: left}
.slide .place.r, .slide .place.right {left: auto;
  right: 15.897%; /*= (L + 1)/w */
  transform: translate(0,-50%); text-align: right}
.slide .place.t.l, .slide .place.top.left, .slide .place.t.r,
.slide .place.top.right, .slide .place.b.l, .slide .place.bottom.left,
.slide .place.b.r, .slide .place.bottom.right {transform: none}

/* Numbered lines in a PRE */
pre.numbered {padding-left: 2em; overflow-y: hidden; position: relative}
pre.numbered::before {color: #aaa; text-align: right; white-space: pre-line;
  text-shadow: none;
  content: "1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 10\A 11\A 12\A 13\A 14\A 15\A 16\A 17\A 18\A 19\A 20";
  position: absolute; top: 0; left: 0; width: 1.2em; font-family: serif;
  border-right: thin solid; padding-right: 0.2em}

/* White-on-black slides, either individual slides or all slides (body.white) */
.slide.white, .white .slide {color: white;
  text-shadow: 0 0 1px black, 0 0 1px black, 0 0 1px black;
  background: 36.389em /*= w - L + 1 */ 18.5em /*= N - L/H + 1 */
    / 3.5em /*= L - 2 */ auto url(../../Icons/W3C-circle.svg) no-repeat,
    bottom right / 5.5em /*= L */ 100%
    linear-gradient(hsl(211,45%,12%), hsl(205,42%,35%)) no-repeat black}
.slide.white ul > li::before,
.white .slide ul > li::before,
.slide.white h1, .slide.white h2,
.white .slide h1, .white .slide h2 {color: hsl(207,99%,75%)}
.slide.white code, .white .slide code {background: #444; text-shadow: none}
.slide.white :link, .white .slide :link {color: hsl(240,100%,90%)}
.slide.white :visited, .white .slide :visited {color: hsl(270,100%,90%)}
.slide.white :link, .slide.white :visited,
.white .slide :link, .white .slide :visited {padding: 0.1em 0.3em;
  border-radius: 0.3em; background: hsla(0,0%,0%,0.3)}
.white table.striped tr:nth-child(2n+2) {background: #333}
.slide.white em,
.white .slide em {background: 0 0 / 100% 100% url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKgAAAAfCAMAAABEWnZLAAAAe1BMVEUAAAAwABw1AB9GACtNAC9VADViAD5sAEVtAEV2AEt3AEx4AE2AAFKIAFiPAFyQAF2WAGGXAGKaAGOeAGajAGqkAGuqAG6qAG+tAHGuAHGwAHO0AHW1AHW2AHa7AHq9AHu+AHy/AH3AAH3BAH7EAIDHAILIAIPLAITNAIbKO9+vAAAB+0lEQVQYGc3BiVbbMBAF0HFVT4Tqh3HVh1oVDU1X/v8La2cjCQnkkMW5V17hVBtEzkUAjarK9XDaIDLZXoUtgtYyIhda2sEKI4LKxdVttvfIESqnV+maSlZ8tqMlrumwyeseDRYiZ7Jty6hkt0oRs12FQtSyi1N0LDY6koDXSl6oNCDSxpTYAV611hmPQcse5JnTgHVdtivBxsk2pxow09JGlkkCvpZdGtpRONdht0bfIodDTHYihXMRC16XatnJaQAimWyudMHJukoDOtLGkRmBSkQcOq5pAXiVZy5mO7VMFjMrXCqZL3y+/3J7O9nvbuWTfJzM3NzeP0wfbWE6/Ubaef2YPvv5e+HP38G/p6df3wdf73qTyeSDrHyYrNw8TB9tfJlkBOC1kl0qFLsOiYyAVyc7NYDOeLDYeSSSMZLENq8ztRyqDi3tMkhGAF7VyQEqHQT0IrOdTmKvw1LHddm2pLZxsk+NmOyMCskWQNBeLe+lkbSlTCa7CL6ELUGdSK3qZZtqAG1chYxAUK1EKiQbJHaNzNQBTDaOzB56qupkg0YOAK1FpGqiXVZhD0BQlVfU2kMtKxrQcgO2cKHYOWWS2TawcfIuvk12IewalaMoumTnUxjRqJMTcdogMttpZJIt4FUrOZfaYxDZK/amxEHEoNGBjMfpTnKk/7kBgWEOZRNIAAAAAElFTkSuQmCC)}

/* Black-on-white pages (in case class=white was set on body) */
.slide.black, .black .slide {color: black;
  text-shadow: 0 0 1px white, 0 0 1px white, 0 0 1px white;
  background: 36.389em /*= w - L + 1 */ 18.5em /*= N - L/H + 1 */
    / 3.5em /*= L - 2 */ auto url(../../Icons/W3C-circle.png) no-repeat,
    bottom right / 5.5em /*= L */ 100% url(../../Icons/ramp.png) no-repeat
    #fff;
  background: 36.389em /*= w - L + 1 */ 18.5em /*= N - L/H + 1 */
    / 3.5em /*= L - 2 */ auto url(../../Icons/W3C-circle.svg) no-repeat,
    bottom right / 5.5em /*= L */ 100%
    linear-gradient(hsl(211,45%,25%), hsl(205,42%,92%)) no-repeat #fff}
.slide.black ul > li::before,
.black .slide ul > li::before,
.slide.black h1, .slide.black h2,
.black .slide h1, .black .slide h2 {color: #015ca4}
.slide.black code, .black .slide code {background: #eee}
.slide.black :link, .black .slide :link {color: #00e;}
.slide.black :visited, .black .slide :visited {color: #609}
.slide.black :link, .slide.black :visited,
.black .slide :link, .black .slide :visited {padding: 0; padding: unset;
  border-radius: 0; border-radius: unset; background: none; background: unset}
.black table.striped tr:nth-child(2n+2) {background: #eee}
.slide.black em,
.black .slide em {background: 0 0 / 100% 100% url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKgAAAAfCAMAAABEWnZLAAAAe1BMVEUAAADM/0L////M/0L////M/0LM/0L////M/0L0/9n////M/0LM/0LM/0Ll/6D////M/0LM/0LW/2fM/0Le/4b////M/0Ld/4H////M/0LX/23M/0La/3j////M/0LM/0LS/1nV/2XY/3Hb/33l/6Dv/8Py/8/4/+f////ILR5EAAAAH3RSTlMADw8fHy8/P09PT19vf39/j5+fr6+vv7+/z8/f39/vM0RnFwAAAfxJREFUGBnNwYlW2zAQBdBxVU9E5Qd21T6qimpouvH/X1g7G0lIIIcszr3yCqfaIHIuAmhUVa6H0waRyfYqbBG0lhG50NIOVhgRVC6ubrO9R45QOb1K11Sy4rMdLXFNh01e92iwEDmTbVtGJbtVipjtKhSill2comOx0ZEEvFbyQqUBkTamxA7wqrXOeAxa9iDPnAas67JdCTZOtjnVgJmWNrJMEvC17NLQjsK5Drs1+hY5HGKyEymci1jwulTLTk4DEMlkc6ULTtZVGtCRNo7MCFQi4tBxTQvAqzxzMdupZbKYWeFSyXzh8/2X29vJfncrn+TjZObm9v5h+mgL0+l30s7r5/TZr98Lf/4O/j09/fg2+HrXm0wmH2Tlw2Tl5mH6aOPLJCMAr5XsUqHYdUhkBLw62akBdMaDxc4jkYyRJLZ5nanlUHVoaZdBMgLwqk4OUOkgoBeZ7XQSex2WOq7LtiW1jZN9asRkZ1RItgCC9mp5L42kLWUy2UXwJWwJ6kRqVS/bVANo4ypkBIJqJVIh2SCxa2SmDmCycWT20FNVJxs0cgBoLSJVE+2yCnsAgqq8otYealnRgJYbsIULxc4pk8y2gY2Td/Ftsgth16gcRdElO5/CiEadnIjTBpHZTiOTbAGvWsm51B6DyF6xNyUOIgaNDmQ8TneSI/0HxFmNoHHqWWQAAAAASUVORK5CYII=)}

/* Full-size image overlays */
img.cover, img.fit {position: absolute; z-index: -1; top: 0;
  left: 0; width: 86.549%; /*= (w - L) / w */ height: 100%; object-fit: cover;
  padding: 0}
img.fit {object-fit: contain}
.slide.cover img.cover, .slide.cover img.fit {
  width: 73.098%; /*= (w - 11) / w */}

/* Slide number in upper right corner */
.slide::after {content: counter(slide); color: white; position: absolute;
  top: 1em; line-height: 1; font-weight: bold; right: 0; width: 5.5em /*= L */;
  text-shadow: none; text-align: center}
.slide.clear::after {content: none}

/* Two columns, and alternate elements in the left and right column */
.slide .columns > * {box-sizing: border-box;
  width: 47.005% /*= (w - L - 4)/2/(w - L - 2) */; float: right}
.slide .columns > *:nth-child(odd) {clear: both; float: left}
.slide .columns {overflow: hidden}
@supports (display: grid) {
  .slide .columns {overflow: visible; display: grid; grid: "a  b" / 1fr 1fr;
     grid-gap: 0 2em}
  .slide .columns > * {width: auto}
}

/* A trick that may be useful for people who insist on putting a lot
   of text on a slide: class "compact" can
   be set on a list or other container and removes the top and bottom
   margin from list items and paragraphs inside that container. */
.slide .compact li, .slide .compact p {margin-top: 0; margin-bottom: 0}

/* Striped tables */
table.striped {border-collapse: collapse}
table.striped td, table.striped th {padding: 0 0.3em}
table.striped tr:nth-child(2n+2) {background: #EEE}

/* Takahashi method (very big text, very few words) */
.shout {font-size: 400%; line-height: 1.1}
p.shout {margin: 0.25em 0}

/* Notes between the slides */
.comment {background: hsl(50,80%,90%); color: black; padding: 1em 1em;
  columns: 37em; font-family: serif; border-radius: 0.5em; margin: 4em 0 0;
  widows: 2; orphans: 2}
.comment :first-child {margin-top: 0}

/* Long comments */
.comment.long {height: auto; display: block;
  border-radius: 0; overflow: auto;
  background: white; color: black}
.comment.long:before {content: none}

/* A list as a tree structure with box-drawing characters */
.tree {white-space: nowrap; line-height: 1.5; padding: 0;
  overflow-x: auto; overflow-y: hidden}
.tree ul {padding: 0}
.tree li {display: block}

.tree li::before {content: "├ "; font-size: 1.2em; line-height: 0.5;
  vertical-align: middle}
.tree li:last-child::before {content: "└ "}

.tree li li::before {content: "│\2002├ "}
.tree li li:last-child::before {content: "│\2002└ "}
.tree li:last-child li::before {content: "\2002\2002├ "}
.tree li:last-child li:last-child::before {content: "\2002\2002└ "}

.tree li li li::before {content: "│\2002│\2002├ "}
.tree li li li:last-child::before {content: "│\2002│\2002└ "}
.tree li li:last-child li::before {content: "│\2002\2002\2002├ "}
.tree li li:last-child li:last-child::before {content: "│\2002\2002\2002└ "}
.tree li:last-child li li::before {content: "\2002\2002│\2002├ "}
.tree li:last-child li li:last-child::before {content: "\2002\2002│\2002└ "}
.tree li:last-child li:last-child li::before {content: "\2002\2002\2002\2002├ "}
.tree li:last-child li:last-child li:last-child::before {content: "\2002\2002\2002\2002└ "}

.tree li li li li::before {content: "│\2002│\2002│\2002├ "}
.tree li li li li:last-child::before {content: "│\2002│\2002│\2002└ "}
.tree li li li:last-child li::before {content: "│\2002│\2002\2002\2002├ "}
.tree li li li:last-child li:last-child::before {content: "│\2002│\2002\2002\2002└ "}
.tree li li:last-child li li::before {content: "│\2002\2002\2002│\2002├ "}
.tree li li:last-child li li:last-child::before {content: "│\2002\2002\2002│\2002└ "}
.tree li li:last-child li:last-child li::before {content: "│\2002\2002\2002\2002\2002├ "}
.tree li li:last-child li:last-child li:last-child::before {content: "│\2002\2002\2002\2002\2002└ "}
.tree li:last-child li li li::before {content: "\2002\2002│\2002│\2002├ "}
.tree li:last-child li li li:last-child::before {content: "\2002\2002│\2002│\2002└ "}
.tree li:last-child li li:last-child li::before {content: "\2002\2002│\2002\2002\2002├ "}
.tree li:last-child li li:last-child li:last-child::before {content: "\2002\2002│\2002\2002\2002└ "}
.tree li:last-child li:last-child li li::before {content: "\2002\2002\2002\2002│\2002├ "}
.tree li:last-child li:last-child li li:last-child::before {content: "\2002\2002\2002\2002│\2002└ "}
.tree li:last-child li:last-child li:last-child li::before {content: "\2002\2002\2002\2002\2002\2002├ "}
.tree li:last-child li:last-child li:last-child li:last-child::before {content: "\2002\2002\2002\2002\2002\2002└ "}

/* Layout in slide mode (when body has class=full) */
.full {transform: scale(var(--shower-full-scale))} /* For Shower 3.1/3.2 */
.full, .full .slide {position: absolute; overflow: hidden}
.full {top: 50%; left: 50%; background: black;
  margin: -11.5em /*= -N/2 */ 0 0 -20.444em /*= -w/2 */}
.full .slide {visibility: hidden; top: 0; left: 0; margin: 0}
.full .slide.active {visibility: visible}
.full .comment {display: none}
.full .slide:target {outline: none}

/* Progress bar. A data-timing attribute on body indicates the slide
   show is automatic and the class "manual" says it is currently
   paused. */
.full .progress {position: absolute; top: 0; left: 0; height: 1px;
  background: linear-gradient(to right, hsla(0,100%,50%,0),hsla(0,100%,50%,1));
  z-index: 1}
[data-timing].manual .progress {background:
  linear-gradient(to right, hsla(240,80%,60%,0),hsla(240,80%,60%,1))}
@media not screen and (prefers-reduced-motion: reduce) {
  /* Experimental media query, see
     https://www.w3.org/TR/2020/WD-mediaqueries-5-20200731/ */
  .full .progress {transition: 0.5s}
}

.full .watermark {position: absolute; top: 50%; left: 50%; z-index: 1;
  margin: 0; transform: translate(-50%, -50%) rotate(-29deg)}

/* Reveal elements one by one. (incremental/overlay only works with b6+) */
.full .incremental > :not(.active):not(.visited),
.full .overlay > :not(.active):not(.visited),
.full .next:not(.active):not(.visited) {visibility: hidden}

/* Animation of a slowly growing element */
@media not screen and (prefers-reduced-motion: reduce) {
  /* Experimental media query, see
     https://www.w3.org/TR/2020/WD-mediaqueries-5-20200731/ */
  .full .grow {transition: 3s 1s ease-in-out transform;
    position: relative; transform: scale(0.1); transform-origin: 0 50%}
  .active .grow {transform: scale(1)}
}

/* Dim previously revealed elements (only with b6+) */
.full .incremental > .visited,
.full .overlay > .visited,
.full .next.visited {opacity: 0.3}

/* Transitions between slides */
@media not screen and (prefers-reduced-motion: reduce) {
  /* Experimental media query, see
     https://www.w3.org/TR/2020/WD-mediaqueries-5-20200731/ */

  .full .slide.active ~ .visited {animation: none} /* Moving backwards */

  /* Transition: fade-in */
  .full .slide.fade-in.visited,
  .fade-in .slide.visited {animation: delay 1s 1}
  .full .slide.fade-in + .active,
  .full .slide.fade-in + .comment + .active,
  .fade-in .slide.active {animation: fade-in 1s 1}
  @keyframes delay {
    from {visibility: visible}
    to {visibility: visible}
  }
  @keyframes fade-in {
    from {opacity: 0}
    to {opacity: 1}
  }

  /* Transition: slide-in */
  .full .slide.slide-in.visited,
  .slide-in .slide.visited {animation: leftout 1s 1}
  .full .slide.slide-in + .active,
  .full .slide.slide-in + .comment + .active,
  .slide-in .slide.active {animation: leftin 1s 1}
  @keyframes leftout {
    from {transform: translate(0%, 0); visibility: visible; z-index: 1}
    to {transform: translate(-100%, 0); visibility: visible; z-index: 1}
  }
  @keyframes leftin {
    from {transform: translate(-100%, 0); visibility: visible}
    to {transform: translate(0%, 0); visibility: visible}
  }

  /* Transition: slide-out */
  .full .slide.slide-out.visited,
  .slide-out .slide.visited {animation: leftout 1s 1}
  .full .slide.slide-out + .active,
  .full .slide.slide-out + .comment + .active,
  .slide-out .slide.active {animation: do-nothing 1s 1}
  @keyframes do-nothing {
    from {z-index: 0}
    to {z-index: 0}
  }

  /* Transition: move-left */
  .full .slide.move-left.visited,
  .move-left .slide.visited {animation: leftout 1s 1}
  .full .slide.move-left + .active,
  .full .slide.move-left + .comment + .active,
  .move-left .slide.active {animation: rightin 1s 1}
  @keyframes rightin {
    from {transform: translate(100%, 0); visibility: visible}
    to {transform: translate(0%, 0); visibility: visible}
  }

  /* Transition: slide-up */
  .full .slide.slide-up.visited,
  .slide-up .slide.visited {animation: topout ease-in 1s 1}
  .full .slide.slide-up + .active,
  .full .slide.slide-up + .comment + .active,
  .slide-up .slide.active {animation: do-nothing ease-in 1s 1}
  @keyframes topout {
    from {transform: translate(0, 0%); visibility: visible; z-index: 1}
    80% {opacity: 1.0}
    to {transform: translate(0, -100%); visibility: visible; opacity: 0.0;
      z-index: 1}
  }

  /* Transition: move-up */
  .full .slide.move-up.visited,
  .move-up .slide.visited {animation: topout ease-in 1s 1}
  .full .slide.move-up + .active,
  .full .slide.move-up + .comment + .active,
  .move-up .slide.active {animation: bottomin ease-in 1s 1}
  @keyframes bottomin {
    from {transform: translate(0, 100%); visibility: visible}
    to {transform: translate(0, 0%); visibility: visible}
  }

  /* Transition: flip-up */
  .full {perspective: 1000px; perspective: 1000}
  .full .slide.flip-up.visited,
  .flip-up .slide.visited {animation: turn-down 1s 1 ease-in}
  .full .slide.flip-up + .active,
  .full .slide.flip-up + .comment + .active,
  .flip-up .slide.active {animation: turn-up 1s 1 ease-out}
  @keyframes turn-down {
    from {transform: rotateX(0deg); visibility: visible}
    50%, to {transform: rotateX(90deg); visibility: hidden}
  }
  @keyframes turn-up {
    from, 50% {transform: rotateX(-90deg); visibility: visible}
    to {transform: rotateX(0deg); visibility: visible}
  }

  /* Transition: flip-left */
  .full .slide.flip-left.visited,
  .flip-left .slide.visited {animation: flip-left1 1s 1 ease-in}
  .full .slide.flip-left + .active,
  .full .slide.flip-left + .comment + .active,
  .flip-left .slide.active {animation: flip-left2 1s 1 ease-out}
  @keyframes flip-left1 {
    from {transform: rotateY(0deg); visibility: visible}
    50%, to {transform: rotateY(-90deg); visibility: hidden}
  }
  @keyframes flip-left2 {
    from, 50% {transform: rotateY(90deg); visibility: visible}
    to {transform: rotateY(0deg); visibility: visible}
  }

  /* Transition: center-out */
  .full .slide.center-out.visited,
  .center-out .slide.visited {animation: gray 1s 1}
  .full .slide.center-out + .active,
  .full .slide.center-out + .comment + .active,
  .center-out .slide.active {animation: center-out 1s 1}
  @keyframes gray {
    from, to {opacity: 0.5; visibility: visible}
  }
  @keyframes center-out {
    from {clip-path: circle(0)}
    to {clip-path: circle(100%)}
  }

  /* Transition: wipe-left */
  .full .slide.wipe-left.visited,
  .wipe-left .slide.visited {animation: gray 1s 1}
  .full .slide.wipe-left + .active,
  .full .slide.wipe-left + .comment + .active,
  .wipe-left .slide.active {animation: rightin 1s 1}

  /* Transition: zigzag-left */
  .full .slide.zigzag-left.visited,
  .zigzag-left .slide.visited {animation: gray 1s 1}
  .full .slide.zigzag-left + .active,
  .full .slide.zigzag-left + .comment + .active,
  .zigzag-left .slide.active {animation: zigzag-left 1s 1}
  @keyframes zigzag-left {
    from {clip-path:
      polygon(120% 0%, 120% 0%, 100% 30%, 120% 60%, 110% 100%, 120% 100%)}
    to   {clip-path:
      polygon(120% 0%,   0% 0%, -20% 30%,   0% 60%, -10% 100%, 120% 100%)}
  }

  /* Transition: zigzag-right */
  .full .slide.zigzag-right.visited,
  .zigzag-right .slide.visited {animation: gray 1s 1}
  .full .slide.zigzag-right + .active,
  .full .slide.zigzag-right + .comment + .active,
  .zigzag-right .slide.active {animation: zigzag-right 1s 1}
  @keyframes zigzag-right {
    from {clip-path:
      polygon(-20% 0%,  -20% 0%, 0% 30%,  -20% 60%, -10% 100%, -20% 100%)}
    to   {clip-path:
      polygon(-20% 0%, 100% 0%, 120% 30%, 100% 60%, 110% 100%, -20% 100%)}
  }

  /* Transition: cut-in */
  .full .slide.cut-in.visited,
  .cut-in .slide.visited {animation: gray 1s 1}
  .full .slide.cut-in + .active,
  .full .slide.cut-in + .comment + .active,
  .cut-in .slide.active {animation: cut-in 1s 1}
  @keyframes cut-in {
    from {transform: translate(-100%, -100%)}
    to {transform: translate(0%, 0%)}
  }

} /* End of @media not screen and (prefers-reduced-motion: reduce) */

/* A section with aria-live=assertive, which should be spoken, but not
   displayed. (b6+ adds this style by itself, but Shower relies on the
   style sheet setting it.)*/
[role=region][aria-live=assertive] {position: absolute; top: 0; left: 0;
  clip: rect(0 0 0 0); clip-path: rect(0 0 0 0)}

/* Trick: If the viewport is exactly w x h or 1.2w x 1.2h,
   it means the slides are
   being shown inside an iframe of that size. Hide everything except
   the targeted slide in that case and omit the black background,
   which would otherwise be visible around the rounded corner of the
   slide. (When JavaScript is on, adding ?full to the end of the slide
   URL, e.g., ".../myslides.html?full#intro", has a similar effect and
   doesn't require the iframe to be this exact size.) */
@media (min-width: 40.839em /*= w - 0.05 */) and
    (max-width: 40.939em /*= w + 0.05 */) and
    (min-height: 22.95em /*= N - 0.05 */) and
    (max-height: 23.05em /*= N + 0.05 */),
    (min-width: 49.017em /*= 1.2 * w - 0.05 */) and
    (max-width: 49.117em /*= 1.2 * w + 0.05 */) and
    (min-height: 27.55em /*= 1.2 * N - 0.05 */) and
    (max-height: 27.65em /*= 1.2 * N + 0.05 */) {
  html {font-size: calc(100vh / 23)}
  body {margin: 0; overflow: hidden}
  body, .full {background: transparent}
  body > *:not(.slide), .comment, .comment.long {display: none}
  .slide {visibility: hidden; box-shadow: none; margin: 0}
  .slide:target {visibility: visible; outline: none}
  .slide.active ~ .slide:target, .slide:target ~ .slide.active {
    visibility: hidden}	/* If both .active and :target, only one is visible */
}

/* class=framed is used to indicate the slides are inside an iframe. */
body.framed {background: transparent}
body.framed .slide {box-shadow: none}
body.framed .progress {display: none}

/* When BODY has class has-2nd-window, it means the window is a
   preview window (b6+ only). */
.has-2nd-window .slide.active {outline: yellow solid 0.5rem;
  outline-offset: 1rem}

/* Style for the popup with the table of contents. */
.toc {width: 95%; max-width: none; margin: auto auto 0 auto; max-height: 90%;
  box-sizing: border-box; overflow: auto; background: hsl(0,0%,98%);
  color: black; padding: 0.5em 0.5em 0.5em 1em}
.toc::backdrop {background: hsl(205,100%,31%,0.5)}
.toc ol {margin: 0.5em 0; columns: 18em; column-rule: thin solid; padding: 0}
.toc li {break-inside: avoid; margin-left: 2em}
.toc li::marker {color: #005a9c}
.toc a {text-decoration: none; color: inherit}
.toc br {display: none}
.toc button {float: right}

/* Printing. */
@page {
  margin: 1cm;
  @bottom-center {content: counter(page)}
}
@media print {
  html {font-size: 10pt}
  body {background: none; margin: 0; columns: 41em}
  .slide {border: 0.5pt solid black; margin: 1rem 1rem 1rem 0; display: block;
    overflow: hidden; page-break-inside: avoid}
  ul {margin: 0.9em 0} /* Compensate slight differences in fonts & margins */
}

/* Output to PDF (trick).

   To output to PDF, print the slides to PDF while selecting a
   landscape paper size, e.g. A4 landscape or Letter landscape.

   This style sheet assumes that, when the output is in landscape
   mode, the goal is to export one slide per page, without margins,
   and omitting the comments between the slides. (On the other hand,
   to output multiple slides per page and interleave the comments,
   choose a page size in portrait mode.)

   Note: Not all user agents respect the 'size' property to set the
   size of the output. If they don't, there will be some margin
   to the right and below each slide. Prince respects the property.
   E.g, to make myslides.pdf from myslides.html:

     prince --page-size=landscape myslides.html

   W3C team can also use the ",pdfui" tool online.
*/
@media print and (orientation: landscape) {
  html {font-size: 7mm}
  .comment, .comment.long {display: none}
  .slide {margin: 0; page-break-after: always; box-shadow: none; border: none}

  @page {
    size: 286.22mm /*= 7 * w */ 161mm /*= 7 * N */;
    margin: 0;
    @bottom-center {content: none}
  }
}
@media print and (orientation: landscape) and (min-width: 11in) {
  /* Letter-size paper */
  html {font-size: 0.26902in /*= 11 / w */}
  @page {size: 11in 6.1875in /*= 11 / A */}
}
@media print and (orientation: landscape) and (min-width: 296mm) {
  /* A4-size paper */
  html {font-size: 7.2636mm /*= 297 / w */}
  @page {size: 297mm 167.06mm /*= 297 / A */}
}