/**
 * Reset some basic elements. hr keeps Bootstrap's margins, which set
 * a section break and a footnote's rule apart from the text.
 */
body, h1, h2, h3, h4, h5, h6,
p, blockquote, pre,
dl, dd, ol, ul, figure {
  margin: 0;
  padding: 0; }

dl.cascading-defn {
    margin-left: 20px;
}

.cascading-defn dd {
    margin-left: 20px;
}

.mb-0 {
    margin-bottom: 0;
}

/**
 * Basic styling
 */
body {
  font: 300 16px/1.5 "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #555;
  background-color: #fdfdfd;
  -webkit-text-size-adjust: 100%;
  -webkit-font-feature-settings: "kern" 1;
  -moz-font-feature-settings: "kern" 1;
  -o-font-feature-settings: "kern" 1;
  font-feature-settings: "kern" 1;
  font-kerning: normal; 
  padding-top: 20px;
}

/**
 * Set `margin-bottom` to maintain vertical rhythm
 */
h1, h2, h3, h4, h5, h6,
p, blockquote, pre,
ul, ol, dl, figure,
.highlight {
    margin-bottom: 15px;
    margin-top: 5px;
}

p:has(+ ul) { margin-bottom: 0px; }

/**
 * Images
 */
img {
  max-width: 100%;
  vertical-align: middle; }

/**
 * Figures
 */
figure > img {
  display: block; }

figcaption {
  font-size: 14px; }

/**
 * Lists
 */
ul, ol {
  margin-left: 30px; }

nav[data-toggle='toc'] ul {
  margin-left: 0px; }


li > ul,
li > ol {
  margin-bottom: 0; }

/**
 * Headings
 */
h1, h2, h3, h4, h5, h6{
  color: #4b2e83; }

/*
h5, h6 {
  font-weight: 300; }

h1, h2, h3, h4 {
  font-weight: 600; }
*/

/**
 * Links
 */
a {
  color: #0A4DF0;
  text-decoration: underline; }
a:visited {
  color: #1756a9; }
a:hover {
  color: #111;
  text-decoration: underline; }

/**
 * Blockquotes
 */
blockquote {
  border-left: 4px solid #e8e8e8;
  padding-left: 15px;
  font-size: 18px; }
blockquote > :last-child {
  margin-bottom: 0; }

/**
 * Code formatting
 */
pre, code {
  font-family: "Inconsolata", monospace;
  font-size: 100%;
  background: none;
}

code {
  padding: 1px 5px; }

pre {
  padding: 8px 12px;
  overflow-x: auto; }

/* Bootstrap sets `pre code { white-space: pre-wrap }`, which wraps
   a line wider than its box. Here each line stays whole, and the
   box scrolls sideways; the print stylesheet below wraps it again,
   since paper cannot scroll. */
pre code {
  white-space: pre; }

/* The code in a box is at least as wide as the box and as wide as
   its longest line, so a mistaken line's tint (.hll below) runs the
   whole line when the box scrolls. */
pre > code {
  border: 0;
  padding-right: 0;
  padding-left: 0;
  display: inline-block;
  min-width: 100%; }

/* Code keeps each line whole, but a box of prose, such as a report
   a post quotes, wraps a long line as its page does: at a space, as
   the console box below wraps. */
.highlight.wrap pre {
  word-break: normal; }

.highlight.wrap pre code {
  display: block;
  white-space: pre-wrap;
  overflow-wrap: break-word; }

/**
 * A terminal run: a fenced block opened with {.console .terminal}.
 * Pygments' console lexer marks each "$ " prompt (.gp) and each line
 * of output (.go); what the user typed is everything else, and stands
 * out as it does on the slides (lecture-slides.html, pre.term). The
 * box is drawn as a macOS terminal window: a title bar carrying the
 * three window buttons, painted with gradients so the Markdown needs
 * no extra markup, over a dark pane in the slides' colors. The
 * selectors name both classes, since pygments.css styles .highlight
 * and its tokens and is loaded after this file (site/js/load-sources.js).
 */
.highlight.terminal {
  background: #1d1f21;
  color: #e6e6e6;
  border-radius: 8px;
  overflow: hidden; }

.highlight.terminal::before {
  content: "";
  display: block;
  height: 28px;
  background-color: #3a3a3c;
  background-image:
    radial-gradient(circle at 18px 14px, #ff5f57 6px, transparent 7px),
    radial-gradient(circle at 38px 14px, #febc2e 6px, transparent 7px),
    radial-gradient(circle at 58px 14px, #28c840 6px, transparent 7px); }

.highlight.terminal pre {
  margin: 0;
  padding: 10px 16px; }

.highlight.terminal code, .highlight.terminal code span {
  color: #ffd866;
  font-weight: 700; }

.highlight.terminal .gp {
  color: #9e9e9e;
  font-weight: 400; }

.highlight.terminal .go {
  color: #e6e6e6;
  font-weight: 400; }

/**
 * A browser console session: a fenced block opened with
 * {.text .devtools}. The box is drawn as the browser's developer
 * tools, a light pane under a tab strip whose one tab is Console,
 * so a session typed into the console reads apart from a terminal
 * run, which is dark under a title bar, and from a listing. The
 * site's devtools.js marks each line typed after the "> " prompt
 * and each line printed back, and the typed lines are set in bold
 * blue, as a terminal's typed lines are set in bold yellow.
 */
.highlight.devtools {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  overflow: hidden; }

.highlight.devtools::before {
  content: "Console";
  display: block;
  height: 28px;
  line-height: 28px;
  padding: 0 16px;
  font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #1f5fa8;
  background: #f0f0f5;
  border-bottom: 1px solid #ccc;
  box-shadow: inset 0 -2px 0 #1f5fa8; }

/* The console wraps a long line, an error message most of all,
   where a terminal scrolls it; so does the box. The code is a
   block, not the inline block above, so it takes the box's width
   and wraps inside it, at a space and not at any character, as
   Bootstrap's `pre { word-break: break-all }` would have it. */
.highlight.devtools pre {
  margin: 0;
  padding: 10px 16px;
  border: 0;
  word-break: normal; }

.highlight.devtools pre code {
  display: block;
  white-space: pre-wrap;
  overflow-wrap: break-word; }

.highlight.devtools .gp {
  color: #9e9e9e; }

.highlight.devtools .typed {
  color: #1f5fa8;
  font-weight: 700; }

.highlight.devtools .go {
  color: #333; }

/**
 * A test listing: a fenced block opened with {.java .test}. A rule
 * and a tint in the blue of the deck's callouts set a test apart
 * from the code it tests, since a test is a claim about one run.
 * The deck's template colors a test's code box the same way.
 */
.highlight.test {
  border-left: 4px solid #1f5fa8;
  padding-left: 0.75em;
  background: #f3f7fc; }

/* The blue rule and the tint are the test block's box, as the
   title bar and dark pane are a run's, so the code inside keeps
   no box of its own: no border, and no margin that would leave a
   strip of tint above and below it. */
.highlight.test pre {
  border: 0;
  margin: 0; }

/**
 * A listing's file name, given on its fence as title="...":
 * pymdownx.highlight sets it in a span.filename heading the box,
 * inside a header row (th.filename) when the listing has line
 * numbers. It is a bar joined to the top of the box, in the colors
 * of the stepper's bar, so the name and the code read as one
 * object. The code below it loses its top margin and top corners.
 */
.highlight span.filename {
  display: block;
  padding: 4px 12px;
  font-family: "Inconsolata", monospace;
  font-size: 0.9em;
  font-weight: 700;
  color: #555;
  background: #f0f0f5;
  border: 1px solid #ccc;
  border-bottom: 0;
  border-radius: 4px 4px 0 0; }

.highlight span.filename + pre,
table.highlighttable:has(th.filename) td pre {
  margin-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0; }

table.highlighttable th.filename {
  padding: 0;
  text-align: left; }

/* A test has no border, only its blue rule and tint, so its bar
   runs from the rule to the right edge in a deeper shade of the
   tint. It reaches back over the test's left padding, 0.75em or
   12px, and sets its text in by that and the code's own 12px, so
   the name starts where the code does. */
.highlight.test span.filename {
  margin-left: -12px;
  padding-left: 24px;
  color: #1f5fa8;
  background: #e1ebf7;
  border: 0;
  border-radius: 0; }

/**
 * A listing with line numbers is a table, the numbers in one cell
 * and the code in the other. A table takes only the width its
 * content needs, so without these rules such a listing is narrower
 * than the boxes around it; the code cell takes the rest. A cell
 * also grows to fit its longest line, which does not wrap, and
 * would push the table past its column on a narrow screen; a
 * max-width of 0 holds the cell to the rest, so its code scrolls.
 */
table.highlighttable {
  width: 100%;
  margin: 5px 0 15px; }

table.highlighttable td.code {
  width: 100%;
  max-width: 0; }

table.highlighttable .highlight {
  margin: 0; }

/* The two cells' boxes meet in the middle, so the corners that
   meet stay square and one border serves as the line between
   them; only the listing's outer corners are rounded. */
table.highlighttable td.linenos pre {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0; }

table.highlighttable td.code pre {
  border-left: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0; }

/**
 * A claim in a listing, a line in double braces that claims.js marks
 * with class claim: the deck's claim color and weight, apart from the
 * code, with a little room above and below. A stepper listing hides
 * all but its given claim, keeping their space, and a strip of
 * controls heads the box, joined to it: labeled buttons and a count
 * of the claims revealed.
 */
.highlight .claim, .highlight .claim span {
  color: #177500;
  font-weight: 700; }

/* The room: a zero-width strut before a claim's first line raises
   that line's top, and one after its last line lowers that line's
   bottom, each by 0.375em, half of what a line-height of 2 adds to
   the code's 1.25. Struts, not a taller line-height on every claim
   line, keep the lines of a two-line claim at the code's own
   spacing. Each strut is the code's line-height plus the room,
   shifted by half the room. */
.highlight .claim-first::before, .highlight .claim-last::after {
  content: "\200b";
  line-height: 1.625em; }

.highlight .claim-first::before {
  vertical-align: 0.1875em; }

.highlight .claim-last::after {
  vertical-align: -0.1875em; }

.highlight .claim-hidden, .highlight .claim-hidden span {
  visibility: hidden; }

/* On a narrow screen the strip wraps whole buttons onto a second
   row, never a button's label. */
.stepper-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  font-size: 0.85em;
  color: #555;
  background: #f0f0f5;
  border: 1px solid #ccc;
  border-bottom: 0;
  border-radius: 4px 4px 0 0; }

/* A listing can be taller than the window, and a step may reveal
   a claim far below the controls, so the head (the controls, and
   a caption box if any) stays in view under the fixed navbar
   while the page scrolls through the listing. It pins only on a
   window at least 720px tall: on a shorter one, such as a phone
   on its side, it would cover most of the code. */
@media (min-height: 720px) {
  .stepper-head {
    position: sticky;
    top: var(--navbar-height);
    z-index: 1; } }

.stepper-head + pre {
  margin-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0; }

.stepper-bar button {
  white-space: nowrap;
  font: inherit;
  line-height: 1.2;
  padding: 3px 9px;
  border: 1px solid #bbb;
  border-radius: 4px;
  background: #fff;
  color: #177500;
  cursor: pointer; }

.stepper-bar button:hover {
  background: #eef6ee; }

.stepper-count {
  margin-left: auto; }

/**
 * A figure stepper (figure-stepper.js): a strip of controls over
 * drawings whose steps are revealed in turn, with the step's caption
 * between or under them. The captions are the figure's numbered
 * list. Live, the list is a box in the blue of the deck's callouts
 * holding every item in the same grid cell, the current one visible,
 * so the box keeps the height of its tallest caption and nothing
 * moves as the reader steps. Shown all, and printed, the list is a
 * list again. Until the script has put the SVGs in the images'
 * places, the list shows as a list, so the page reads without it.
 */
.figure-stepper .stepper-bar {
  border-bottom: 1px solid #ccc;
  border-radius: 4px; }

.figure-stepper .figure-svg {
  display: block;
  width: 100%;
  height: auto;
  margin: 12px 0; }

.figure-stepper .step-hidden {
  visibility: hidden; }

/* The current step's group, in the callouts' blue, so the reader
   sees where this step's action is. */
.figure-stepper .current line {
  stroke: #1f5fa8; }

.figure-stepper .current rect, .figure-stepper .current circle {
  stroke: #1f5fa8;
  fill: #f3f7fc; }

.figure-stepper .current text {
  fill: #1f5fa8; }

.figure-stepper-live:not(.figure-stepper-all) > ol, .stepper-caption {
  display: grid;
  margin: 0;
  padding: 8px 12px;
  list-style: none;
  border-left: 4px solid #1f5fa8;
  border-radius: 4px;
  background: #f3f7fc; }

.figure-stepper-live:not(.figure-stepper-all) > ol > li,
.stepper-caption > li {
  grid-area: 1 / 1;
  visibility: hidden; }

.figure-stepper-live:not(.figure-stepper-all) > ol > li.current,
.stepper-caption > li.current {
  visibility: visible; }

/* Before the first step, no item is current, and the box says
   what to press, drawn in the items' cell. */
.figure-stepper-live:not(.figure-stepper-all) > ol::before,
.stepper-caption::before {
  content: "Press Step to begin.";
  grid-area: 1 / 1;
  align-self: start;
  color: #777;
  visibility: visible; }

.figure-stepper-live:not(.figure-stepper-all) > ol:has(li.current)::before,
.stepper-caption:has(li.current)::before {
  visibility: hidden; }

/**
 * A captioned stepper (claims.js): a stepper listing in a div of
 * class stepper-captions, with a numbered list there, one item per
 * step. Live, a copy of the list sits between the controls and the
 * code, drawn by the figure stepper's caption rules above, and the
 * claim the current step revealed turns the same blue, so the
 * reader can find the claim the caption explains. The list itself
 * shows under the code when every step is shown, in print, and
 * without the script.
 */
.stepper-captions-live:not(.stepper-captions-all) > ol {
  display: none; }

/* Inside the listing's box: square corners, and the box's border on
   the right, so the caption joins the strip above and the code. */
.stepper-caption {
  border-right: 1px solid #ccc;
  border-radius: 0; }

.stepper-captions-all .stepper-caption {
  display: none; }

.highlight .claim-current, .highlight .claim-current span {
  color: #1f5fa8; }

/**
 * A marked line, which a fence names in hl_lines: a tint and a
 * bar at the left edge, across the box's width, so the bar marks
 * the line without its color. The colors are the site's: a bare
 * fence marks a mistake in the danger colors, and a fence with
 * class yellow, blue, or green takes that color, the deck's code
 * box yellow, the test box blue, or the claim green. The selector
 * outranks pygments.css's, which loads after this file.
 */
.highlight pre .hll {
  display: block;
  margin: 0 -12px;
  padding: 0 12px 0 8px;
  border-left: 4px solid #991111;
  background: #fceced; }

.highlight.yellow pre .hll {
  border-left-color: #f0a030;
  background: #fff8d8; }

.highlight.blue pre .hll {
  border-left-color: #1f5fa8;
  background: #f3f7fc; }

.highlight.green pre .hll {
  border-left-color: #177500;
  background: #eef6ee; }

/* A listing of a copy that drops a line (a fence with class gone)
   shows the dropped line struck through in the same red, in its
   place, so every other line keeps its number. */
.highlight.gone pre .hll {
  text-decoration: line-through;
  text-decoration-color: #991111;
  text-decoration-thickness: 2px; }

.highlight.gone pre .hll span {
  color: #991111; }

/**
 * Site header
 */

.site-header {
  border-bottom: 1px solid #e8e8e8;
  min-height: 56px;
  position: relative; }

/**
 * Site footer
 */
.site-footer {
  border-top: 1px solid #e8e8e8;
  margin: 20px 20px 50px 20px;
  padding: 30px 0; }

/* Bootstrap fixes the container's width from 768px up, and between
   its side margins the footer can be narrower, enough at 768px to
   pan the page; the container keeps to the footer instead. */
.site-footer .container {
  max-width: 100%; }

.cse-wordmark {
    width:260px;
    float:left;
}

.site-footer-right{
    float:right;
}


.site-header {
  border-bottom-style: none; }


.site-footer {
  padding: 10px 0;
}

/* Top Navigation Bar */

.navbar-default .navbar-brand a {
  color: #4b2e83; }

.navbar-default .navbar-brand a:hover,
.navbar-default .navbar-brand a:focus {
  color: #4b2e83;
  background-color: #ddd; }

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  background-color: #ddd; }

.navbar-default .navbar-right > li > a {
  color: #4b2e83; }

.navbar-default .navbar-right > li > a:hover,
.navbar-default .navbar-right > li > a:focus {
  color: #4b2e83; }

/* Floating Navigation Box */

.nav-box {
    border: 1px solid #ccc;
    background-color: #eee;
    float: right;
    width: 10em;
    margin: 0px 20px 0px 20px
}

.nav-box ul {
    list-style: none;
    margin: 0px 10px 10px 20px;
}

.nav-box-header {
    font-weight: bold;
    margin: 10px 10px 0px 10px;
}

/* 
 * Use this as needed to adjust the spacing between the menu items across the top.
 * To avoid wrapping, the menus and course title should fit within 768 pixels.
 */
/*.nav>li>a {
    padding-left: 10px;
    padding-right: 10px;
}*/


/* 
 * If the course title is long, uncomment and adjust the max-width to make it behave on a very narrow 
 * display (such as a phone display) without wrapping. 
 */
/*@media screen and (max-width: 400px) { 
  .navbar-brand {
      width: calc(100% - 70px);
      overflow:hidden;
      white-space: nowrap;
  }
}*/

@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}


/*

@media (min-width: 992px) {
  .site-footer {
    width: 992px;
    margin-left: auto;
    margin-right: auto;
  }

  .site-header {
    width: 992px;
    margin-left: auto;
    margin-right: auto;
  }
  .navbar {
    width: 992px;
    margin-left: auto;
    margin-right: auto;
  }

}

*/


nav[data-toggle='toc'] {
  margin-top: 30px;
}

@media (min-width: 992px) {
  nav[data-toggle='toc'] {
    width: 240px;
  }
  nav[data-toggle='toc'] .nav > li > a {
    font-size: 16px !important;
  }
}



@media (max-width: 991px) {
  nav.affix[data-toggle='toc'] {
    position: static;
    /*display: none; */
  }

  /* don't expand nested items, which pushes down the rest of the page when navigating */
  nav[data-toggle='toc'] .nav .active .nav {
    display: none;
  }

  nav[data-toggle='toc'] .nav > li > a {
    font-size: 20px !important;
  }
}



.bg-warning {
    background-color: #ffd07b;
}

.hljs {
    background: inherit !important;
}

pre code.hljs {
    padding: 0px !important;
}

table.datatable :is(td, th) {
    vertical-align: top;
    border-style: solid;
    border-width: 1px;
    padding: 5px;
}

/* Override Bootstrap 3.3 default colors for higher contrast */

.navbar-default .navbar-nav > li > a, .navbar-default .navbar-nav > li.active > a {
  color: #333;
}

nav[data-toggle=toc] .nav > li > a {
  color: #555;
}

/* Nested uls shouldn't have an extra margin-top */
ul > li > ul {
  margin-top: 0;
}

/**
 * Admonition callout boxes (note, warning, tip, danger, etc.)
 */
.admonition {
    background-color: #f0f0f5;
    border-radius: 8px;
    border: 2px solid #4b2e83;
    margin-bottom: 1em;
    padding-bottom: 0.5rem;
    overflow: hidden;
}

.admonition-title {
    font-weight: bold;
    font-size: 110%;
    padding: 0.5rem 1rem;
    color: #fff;
    background-color: #4b2e83;
    margin: 0 0 0.5rem 0;
}

.admonition p {
    margin: 0 0 0.5rem 0;
    padding: 0 1rem;
}

/* A code block inside a box, such as a rule's schematic, keeps the
   same gap from the box's sides as the box's paragraphs. */
.admonition .highlight {
    margin: 0.75rem 1.5rem 1rem 1.5rem;
}

.admonition.warning {
    border-color: #b4530a;
    background-color: #fdf8ec;
}

.admonition.warning > .admonition-title {
    background-color: #b4530a;
}

.admonition.danger {
    border-color: #991111;
    background-color: #fceced;
}

.admonition.danger > .admonition-title {
    background-color: #991111;
}

.admonition.tip {
    border-color: #2a7a2a;
    background-color: #eef6ee;
}

.admonition.tip > .admonition-title {
    background-color: #2a7a2a;
}

.admonition.about {
    border-color: #555;
    background-color: #f5f5f5;
}

.admonition.about > .admonition-title {
    background-color: #555;
}

/**
 * Folded content (<details>), such as an exercise's answer, sits in
 * a bordered, pale green box that its summary line opens; its last
 * child drops its margin so the padding is even. Bootstrap resets
 * summary to a plain block, which hides the disclosure triangle;
 * restore it.
 */
details {
    background-color: #eef6ee;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 0.5rem 1rem;
    margin-bottom: 1em;
}

details > :last-child {
    margin-bottom: 0;
}

summary {
    display: list-item;
    cursor: pointer;
}

/**
 * Footnotes. The <hr> that opens the box is their one rule: unlike
 * a border, it is in the page's structure, where a screen reader
 * meets it.
 */
.footnote {
    font-size: 90%;
    color: #666;
    margin-top: 2em;
}

/**
 * Anchor targets clear the fixed navbar.
 *
 * The navbar is `position: fixed; top: 0`, so it sits over the top of the
 * scrollport. Without this, following an in-page link (the table of contents,
 * a footnote, a section link) scrolls the target to y=0 -- directly underneath
 * the navbar, where it is invisible.
 *
 * `scroll-padding-top` on the scroll container is the fix rather than
 * `scroll-margin-top` on each heading: it insets the scrollport itself, so it
 * applies to *every* scroll-into-view -- :target navigation, scrollIntoView(),
 * browser find-in-page, and sequential focus navigation -- without having to
 * enumerate which elements can be targeted.
 *
 * The height is not a constant: the brand wraps to a second line on narrow
 * screens (51px at desktop, ~101px at 375px), so nav-bar.js measures the
 * navbar and keeps --navbar-height in sync. The value below is the
 * single-line fallback used before that runs, or if JS is unavailable.
 */
:root {
    --navbar-height: 51px;
}

html {
    scroll-padding-top: calc(var(--navbar-height) + 0.5rem);
}

/**
 * Accessibility: skip-to-content link
 * Visible only on keyboard focus (uses Bootstrap's sr-only base).
 */
.sr-only-focusable:focus {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    padding: 0.75em 1.5em;
    background: #4b2e83;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    clip: auto;
    width: auto;
    height: auto;
    overflow: visible;
}

/**
 * Accessibility: enhanced keyboard focus indicators
 */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #0A4DF0;
    outline-offset: 2px;
}

.navbar-default .navbar-nav > li > a:focus-visible {
    outline: 3px solid #0A4DF0;
    outline-offset: -3px;
}

/* A display equation scrolls in a box of its own, and the element
   MathJax focuses scrolls with the math, so a ring on it would slide
   off the box. The box takes the ring, and the element drops its own. */
mjx-container[display]:has(mjx-speech:focus-visible) {
    outline: 3px solid #0A4DF0;
    outline-offset: 2px;
}

mjx-container[display] mjx-speech:focus-visible {
    outline: none;
}

/**
 * Accessibility: respect reduced motion preferences
 */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/**
 * Print stylesheet
 */
@media print {
    /* A stepper prints whole: every claim shown, no controls. A
       mistaken line keeps its bar at the edge of the printed box,
       whose padding is 8px below; Bootstrap's print reset strips
       every background, so the bar alone marks the line. */
    .highlight .claim-hidden, .highlight .claim-hidden span {
        visibility: visible;
    }
    .stepper-bar {
        display: none;
    }
    /* A figure stepper prints as after its last step, with its list
       as the captions: every step shown, and a group that ends at a
       step (data-to) hidden. */
    .figure-stepper .step-hidden {
        visibility: visible;
    }
    .figure-stepper .figure-svg [data-to] {
        visibility: hidden;
    }
    .figure-stepper-live:not(.figure-stepper-all) > ol {
        display: block;
        padding: 0 0 0 40px;
        list-style: decimal;
        border: 0;
    }
    .figure-stepper-live:not(.figure-stepper-all) > ol > li {
        visibility: visible;
    }
    .figure-stepper-live:not(.figure-stepper-all) > ol::before {
        content: none;
    }
    /* A captioned stepper prints as when shown all,
       its list under the code. */
    .stepper-caption {
        display: none;
    }
    .stepper-captions-live:not(.stepper-captions-all) > ol {
        display: block;
    }
    /* A trace table prints whole too (trace.js; the selector outranks
       the screen rule at the end of this file). */
    .trace-box tbody tr.trace-hidden {
        display: table-row;
    }
    .highlight pre .hll {
        margin: 0 -8px;
        padding: 0 8px 0 4px;
    }

    /* Hide navigation, TOC sidebar, and footer */
    .site-header,
    .navbar,
    nav[data-toggle='toc'],
    .col-md-3,
    .site-footer,
    .sr-only-focusable {
        display: none !important;
    }

    /* Make content full-width */
    .col-md-9 {
        width: 100% !important;
        float: none !important;
    }

    .container {
        width: 100% !important;
        max-width: none !important;
    }

    /* Reset body styling */
    body {
        padding-top: 0 !important;
        color: #000 !important;
        background: #fff !important;
        font-size: 12pt;
    }

    /* Ensure headings are black */
    h1, h2, h3, h4, h5, h6 {
        color: #000 !important;
        page-break-after: avoid;
    }

    /* Show link URLs after link text */
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 90%;
        color: #555;
    }

    /* Don't show URL for internal/anchor links or JavaScript links */
    a[href^="#"]::after,
    a[href^="javascript:"]::after,
    .navbar a::after {
        content: "" !important;
    }

    /* Prevent page breaks inside important elements, and between a
       listing's file-name bar and its code */
    pre, blockquote, table, img, .admonition, .highlight {
        page-break-inside: avoid;
    }

    /* Code blocks get visible borders when printed. A long line of
       code scrolls on screen; on paper it would be cut off, so it
       wraps, at a space where it can: not at any character, as
       Bootstrap's `pre { word-break: break-all }` would have it. */
    pre {
        border: 1px solid #ccc;
        padding: 8px;
        word-break: normal;
        overflow-wrap: anywhere;
    }
    pre code {
        white-space: pre-wrap;
    }
    /* An inline block cannot break across pages, so a listing longer
       than a page would print its code apart from its line numbers. */
    pre > code {
        display: inline;
    }
}

/**
 * A trace table (trace.js): a loop's run, one row per condition
 * check, headed by the stepper's strip and joined to it. The table
 * keeps the lecture page's table style (lecture-page.html) with or
 * without the script; only its top margin goes, under the strip. A
 * row not yet reached is removed.
 */
.trace-box table, main .trace-box table:not([class]) {
  margin-top: 0; }

.trace-hidden {
  display: none; }

/* On a phone the page's 12px 16px cell padding leaves the invariant's
   column a word wide; the five columns get tighter cells instead. */
@media (max-width: 480px) {
  main .trace-box table:not([class]) th,
  main .trace-box table:not([class]) td {
    padding: 8px 6px; } }