/*
 * A representation of a punch card.
 */
.rbws-c-punchcard {
  background: #F5EED0;
  border: 1px solid #BBA627;
  border-radius: 2px;
  border-top-left-radius: 14px;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
  display: block;
  font-family: var(--ink-ff-monospace);
  font-size: 20px;
  line-height: 1.5;
  max-width: 100%;
  overflow: hidden;
  text-align: left;
}
.rbws-c-punchcard.-has-error .rbws-c-punchcard__footer {
  background: #FFEEEE;
  border-top-color: #CC4444;
  color: #AA0000;
}
.rbws-c-punchcard.-show-columns .rbws-c-punchcard__col-num:nth-child(7),
.rbws-c-punchcard.-show-columns .rbws-c-punchcard__dot:nth-child(7),
.rbws-c-punchcard.-show-columns .rbws-c-punchcard__hole:nth-child(7),
.rbws-c-punchcard.-show-columns .rbws-c-punchcard__col-num:nth-child(73),
.rbws-c-punchcard.-show-columns .rbws-c-punchcard__dot:nth-child(73),
.rbws-c-punchcard.-show-columns .rbws-c-punchcard__hole:nth-child(73) {
  border-left: 1px #BBA627 solid;
}
.rbws-c-punchcard.-show-columns .rbws-c-punchcard__cols > span.-is-code-text {
  border-left: 1px #BBA627 solid;
}
.rbws-c-punchcard.rbws-c-tour__screenshot {
  margin: 0 auto;
  width: 700px;
}
.rbws-c-punchcard__code {
  background: transparent;
  border: none;
  color: #3A3020;
  font-size: 15px;
  letter-spacing: 0;
  line-height: 2;
  padding: 0;
}
.rbws-c-punchcard__cols {
  display: flex;
  font-size: 20px;
  letter-spacing: 2px;
  white-space: pre-wrap;
}
.rbws-c-punchcard__cols.-is-col-numbers {
  align-items: end;
}
.rbws-c-punchcard__cols.-is-error {
  color: #CC2222;
  font-size: 15px;
}
.rbws-c-punchcard__cols.-is-header {
  color: #6A5A30;
  font-size: 15px;
}
.rbws-c-punchcard__cols.-is-ok {
  color: #228822;
  font-size: 15px;
}
.rbws-c-punchcard__cols .rbws-c-punchcard__col-num,
.rbws-c-punchcard__cols .rbws-c-punchcard__dot,
.rbws-c-punchcard__cols .rbws-c-punchcard__hole {
  display: inline-block;
  width: 14px;
}
.rbws-c-punchcard__cols .rbws-c-punchcard__hole:before {
  -background: #2A1F08;
  content: '▮';
  width: 10px;
  height: 20px;
  display: inline-block;
}
.rbws-c-punchcard__cols .rbws-c-punchcard__dot:before {
  color: #C4AE72;
  content: '·';
}
.rbws-c-punchcard__col-num {
  color: #6A5A30;
  font-size: var(--ink-u-font-s);
  text-align: center;
  word-break: break-all;
}
.rbws-c-punchcard__header {
  background: #E5D7A8;
  border-bottom: 1px #BBA627 solid;
  color: black;
  display: flex;
  font-size: var(--ink-u-font-sm);
  font-weight: var(--ink-ff-default);
  justify-content: space-between;
  letter-spacing: 0.1em;
  padding: 6px 12px;
  text-transform: uppercase;
}
.rbws-c-punchcard__info-bar {
  color: #6A5A30;
  display: flex;
  font-size: 12px;
  justify-content: space-around;
  letter-spacing: 0.05em;
  margin: 3px 0;
  padding: 3px 12px 0;
  text-transform: uppercase;
}
.rbws-c-punchcard__rows {
  padding: 6px 0;
}
.rbws-c-punchcard__rows.-is-code .rbws-c-punchcard__cols {
  font-size: 15px;
}
.rbws-c-punchcard__rows.-is-code .rbws-c-punchcard__row {
  align-items: baseline;
}
.rbws-c-punchcard__row {
  align-items: center;
  display: flex;
}
.rbws-c-punchcard__row-label {
  color: #6A5A30;
  min-width: 22px;
  text-align: right;
  margin-right: 6px;
  font-size: 15px;
  padding: 1px 0 1px 12px;
}
.rbws-c-punchcard__footer {
  background: #E8D8A0;
  border-top: 1px solid #BBA627;
  color: #6A5A30;
  font-size: 12px;
  letter-spacing: 0.1em;
  padding: 4px 12px;
  text-transform: uppercase;
}
.rbws-c-punchcard__syntax-linenum {
  color: #888;
}
.rbws-c-punchcard__syntax-keyword {
  color: #CC4400;
}
.rbws-c-punchcard__syntax-ident {
  color: #224488;
}
.rbws-c-punchcard__syntax-number {
  color: #226622;
}
.rbws-c-punchcard__syntax-string {
  color: #884488;
}
/*
 * Comment dialog for the column-comments section.
 *
 * The frontpage.less ``rbws-c-tour-comment-dialog`` component styles are
 * reproduced here since that file is only imported as a reference (for its
 * mixins). The dialog uses the standard comment-dialog.png image so that the
 * typing animation has a fixed-width container to measure against.
 *
 * Structure:
 *     <div class="rbws-c-tour-comment-dialog">
 *      <div class="rbws-c-tour-comment-dialog__text"></div>
 *      <img class="rbws-c-tour-comment-dialog__image" ...>
 *     </div>
 */
.rbws-c-tour-comment-dialog {
  left: 4em;
  opacity: 0;
  position: absolute;
  top: 14em;
}
.rbws-c-tour-comment-dialog__text {
  font-family: monospace;
  font-size: 90%;
  left: 25px;
  overflow: hidden;
  position: absolute;
  top: 45px;
  white-space: nowrap;
  width: 0;
}
#column-comments .rbws-c-comment-row-flag {
  opacity: 0;
}
#column-comments .rbws-c-comment-punchcard-region {
  background: #D1F5A973;
  border: 1px #599304 solid;
  border-radius: 0 0 4px 4px;
  box-sizing: border-box;
  position: absolute;
  opacity: 0;
}
#column-comments .rbws-c-tour__screenshot-container {
  padding-bottom: 6.5em;
}
#column-comments .js-is-in-view .rbws-c-tour-comment-dialog {
  animation: rbws-anim-column-comments-dialog-show 0.5s ease-in forwards 1.4s;
}
@keyframes rbws-anim-column-comments-dialog-show {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 1em, 0);
  }
}
@keyframes rbws-anim-tour-column-comments-comment {
  0% {
    width: 14px;
    opacity: 0;
  }
  30% {
    width: 14px;
    opacity: 1;
  }
  100% {
    width: 86px;
    opacity: 1;
  }
}
@keyframes rbws-anim-tour-column-comments-comment-region {
  0% {
    width: 14px;
    height: 405px;
    opacity: 0;
  }
  30% {
    width: 14px;
    height: 405px;
    opacity: 1;
  }
  100% {
    width: 86px;
    height: 405px;
    opacity: 1;
  }
}
@keyframes rbws-anim-tour-column-comments-typing {
  0% {
    width: 0;
  }
  100% {
    width: 21ch;
  }
}
#column-comments .js-is-in-view .rbws-c-comment-row-flag {
  animation: rbws-anim-tour-column-comments-comment 1.2s ease-in-out forwards 0.2s;
  left: 165px;
  top: 82px;
}
#column-comments .js-is-in-view .rbws-c-tour-comment-dialog__text {
  animation: rbws-anim-tour-column-comments-typing 0.8s steps(21, end) forwards 2.15s;
}
#column-comments .js-is-in-view .rbws-c-tour-comment-dialog__text:before {
  content: "This NE should be GE.";
  height: auto;
  width: auto;
}
#column-comments .js-is-in-view .rbws-c-comment-punchcard-region {
  animation: rbws-anim-tour-column-comments-comment-region 1.2s ease-in-out forwards 0.2s;
  left: 165px;
  top: 92px;
}
#column-comments .js-is-in-view .rbws-c-tour-comment-dialog {
  left: 15em;
}
/*
 * Mainframe compatibility badges.
 */
.rbws-punchcards-mainframes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em;
  justify-content: center;
  margin: 1.5em auto;
  max-width: 72em;
}
.rbws-punchcards-mainframes .rbws-punchcards-mainframe {
  background: #1E3A6A;
  border-radius: 3px;
  color: #E8D8A0;
  font-family: var(--ink-ff-monospace);
  font-size: 10pt;
  letter-spacing: 0.05em;
  padding: 0.4em 0.8em;
}
/*
 * Fine print footnotes at the bottom of the page.
 */
.rbws-punchcards-fine-print {
  border-top: 1px solid #DDD;
  color: #888;
  font-size: 8pt;
  margin: 3em auto 0;
  max-width: 72em;
  padding-top: 1em;
}
.rbws-punchcards-fine-print p {
  margin: 0.5em 0;
}
/*
 * Terminal animation for the RBTools demo.
 */
#punch-cards-terminal .rbws-punchcards-ok {
  color: #66CC66;
}
#punch-cards-terminal .rbws-punchcards-warning {
  color: #FFAA44;
}
#punch-cards-terminal .rbws-c-terminal__line:first-child:after {
  content: "_";
  display: inline;
  animation: rbws-anim-terminal-cursor-blink 0.5s step-start infinite;
}
#punch-cards-terminal.js-is-in-view .rbws-c-terminal__line:nth-child(1) {
  /* If it's a typing line... */
  /* Add the animation time to the counter. */
  /* If it's output... */
}
@keyframes rbws-anim-terminal-punch-cards-upload-1 {
  0% {
    width: 0;
  }
  100% {
    width: 16ch;
  }
}
#punch-cards-terminal.js-is-in-view .rbws-c-terminal__line:nth-child(1):after {
  /*
               * Show the cursor at the end of the typed text, and then hide
               * it when typing concludes.
               */
  content: "_";
  display: inline;
  animation: rbws-anim-terminal-cursor-blink 0.5s step-start infinite 0s, rbws-anim-show-while-animating 1.52s linear forwards 0s;
  visibility: hidden;
}
#punch-cards-terminal.js-is-in-view .rbws-c-terminal__line:nth-child(1) .rbws-c-terminal__input {
  /* Show an animation simulating typing. */
  animation: rbws-anim-terminal-punch-cards-upload-1 1.12s steps(16, end) forwards 0.4s;
}
#punch-cards-terminal.js-is-in-view .rbws-c-terminal__line:nth-child(1) .rbws-c-terminal__prompt {
  /*
               * Older versions of Safari don't like 0 second animations, so
               * we're using 0.01s, which works.
               */
  animation: rbws-anim-show-immediate 0.01s linear forwards 0s;
}
#punch-cards-terminal.js-is-in-view .rbws-c-terminal__line:nth-child(2) {
  /* If it's a typing line... */
  /* If it's output... */
}
#punch-cards-terminal.js-is-in-view .rbws-c-terminal__line:nth-child(2) .rbws-c-terminal__line-segment:nth-child(1) {
  /* Show the output line all at once after the specified delay. */
  color: #BDBDBD;
  animation: rbws-anim-show-immediate 0s linear forwards 1.82s;
  /* Add the animation time to the counter. */
}
#punch-cards-terminal.js-is-in-view .rbws-c-terminal__line:nth-child(2) .rbws-c-terminal__line-segment:nth-child(1):before {
  /*
         * Show the cursor at the start of the line immediately, but
         * hide it when we're ready to show output.
         */
  content: "_";
  display: inline;
  animation: rbws-anim-terminal-cursor-blink 0.5s step-start infinite 1.82s, rbws-anim-terminal-output-cursor-visibility 0s linear forwards 1.82s;
  margin-right: 1ch;
}
#punch-cards-terminal.js-is-in-view .rbws-c-terminal__line:nth-child(2) .rbws-c-terminal__line-segment:nth-child(2) {
  /* Show the output line all at once after the specified delay. */
  color: #BDBDBD;
  animation: rbws-anim-show-immediate 0s linear forwards 2.57s;
  /* Add the animation time to the counter. */
}
#punch-cards-terminal.js-is-in-view .rbws-c-terminal__line:nth-child(2) .rbws-c-terminal__line-segment:nth-child(2):before {
  /*
         * Show the cursor at the start of the line immediately, but
         * hide it when we're ready to show output.
         */
  content: "_";
  display: inline;
  animation: rbws-anim-terminal-cursor-blink 0.5s step-start infinite 1.82s, rbws-anim-terminal-output-cursor-visibility 0.75s linear forwards 1.82s;
  margin-right: 1ch;
}
#punch-cards-terminal.js-is-in-view .rbws-c-terminal__line:nth-child(3) {
  /* If it's a typing line... */
  /* If it's output... */
  /* Show the output line all at once after the specified delay. */
  color: #BDBDBD;
  animation: rbws-anim-show-immediate 0s linear forwards 3.07s;
  /* Add the animation time to the counter. */
}
#punch-cards-terminal.js-is-in-view .rbws-c-terminal__line:nth-child(3):before {
  /*
         * Show the cursor at the start of the line immediately, but
         * hide it when we're ready to show output.
         */
  content: "_";
  display: inline;
  animation: rbws-anim-terminal-cursor-blink 0.5s step-start infinite 2.57s, rbws-anim-terminal-output-cursor-visibility 0.5s linear forwards 2.57s;
  margin-right: 1ch;
}
#punch-cards-terminal.js-is-in-view .rbws-c-terminal__line:nth-child(4) {
  /* If it's a typing line... */
  /* If it's output... */
}
#punch-cards-terminal.js-is-in-view .rbws-c-terminal__line:nth-child(4) .rbws-c-terminal__line-segment:nth-child(1) {
  /* Show the output line all at once after the specified delay. */
  color: #BDBDBD;
  animation: rbws-anim-show-immediate 0s linear forwards 4.57s;
  /* Add the animation time to the counter. */
}
#punch-cards-terminal.js-is-in-view .rbws-c-terminal__line:nth-child(4) .rbws-c-terminal__line-segment:nth-child(1):before {
  /*
         * Show the cursor at the start of the line immediately, but
         * hide it when we're ready to show output.
         */
  content: "_";
  display: inline;
  animation: rbws-anim-terminal-cursor-blink 0.5s step-start infinite 4.57s, rbws-anim-terminal-output-cursor-visibility 0s linear forwards 4.57s;
  margin-right: 1ch;
}
#punch-cards-terminal.js-is-in-view .rbws-c-terminal__line:nth-child(4) .rbws-c-terminal__line-segment:nth-child(2) {
  /* Show the output line all at once after the specified delay. */
  color: #BDBDBD;
  animation: rbws-anim-show-immediate 0s linear forwards 5.07s;
  /* Add the animation time to the counter. */
}
#punch-cards-terminal.js-is-in-view .rbws-c-terminal__line:nth-child(4) .rbws-c-terminal__line-segment:nth-child(2):before {
  /*
         * Show the cursor at the start of the line immediately, but
         * hide it when we're ready to show output.
         */
  content: "_";
  display: inline;
  animation: rbws-anim-terminal-cursor-blink 0.5s step-start infinite 4.57s, rbws-anim-terminal-output-cursor-visibility 0.5s linear forwards 4.57s;
  margin-right: 1ch;
}
#punch-cards-terminal.js-is-in-view .rbws-c-terminal__line:nth-child(5) {
  /* If it's a typing line... */
  /* If it's output... */
}
#punch-cards-terminal.js-is-in-view .rbws-c-terminal__line:nth-child(5) .rbws-c-terminal__line-segment:nth-child(1) {
  /* Show the output line all at once after the specified delay. */
  color: #BDBDBD;
  animation: rbws-anim-show-immediate 0s linear forwards 5.57s;
  /* Add the animation time to the counter. */
}
#punch-cards-terminal.js-is-in-view .rbws-c-terminal__line:nth-child(5) .rbws-c-terminal__line-segment:nth-child(1):before {
  /*
         * Show the cursor at the start of the line immediately, but
         * hide it when we're ready to show output.
         */
  content: "_";
  display: inline;
  animation: rbws-anim-terminal-cursor-blink 0.5s step-start infinite 5.57s, rbws-anim-terminal-output-cursor-visibility 0s linear forwards 5.57s;
  margin-right: 1ch;
}
#punch-cards-terminal.js-is-in-view .rbws-c-terminal__line:nth-child(5) .rbws-c-terminal__line-segment:nth-child(2) {
  /* Show the output line all at once after the specified delay. */
  color: #BDBDBD;
  animation: rbws-anim-show-immediate 0s linear forwards 6.07s;
  /* Add the animation time to the counter. */
}
#punch-cards-terminal.js-is-in-view .rbws-c-terminal__line:nth-child(5) .rbws-c-terminal__line-segment:nth-child(2):before {
  /*
         * Show the cursor at the start of the line immediately, but
         * hide it when we're ready to show output.
         */
  content: "_";
  display: inline;
  animation: rbws-anim-terminal-cursor-blink 0.5s step-start infinite 5.57s, rbws-anim-terminal-output-cursor-visibility 0.5s linear forwards 5.57s;
  margin-right: 1ch;
}
#punch-cards-terminal.js-is-in-view .rbws-c-terminal__line:nth-child(6) {
  /* If it's a typing line... */
  /* If it's output... */
}
#punch-cards-terminal.js-is-in-view .rbws-c-terminal__line:nth-child(6) .rbws-c-terminal__line-segment:nth-child(1) {
  /* Show the output line all at once after the specified delay. */
  color: #BDBDBD;
  animation: rbws-anim-show-immediate 0s linear forwards 6.57s;
  /* Add the animation time to the counter. */
}
#punch-cards-terminal.js-is-in-view .rbws-c-terminal__line:nth-child(6) .rbws-c-terminal__line-segment:nth-child(1):before {
  /*
         * Show the cursor at the start of the line immediately, but
         * hide it when we're ready to show output.
         */
  content: "_";
  display: inline;
  animation: rbws-anim-terminal-cursor-blink 0.5s step-start infinite 6.57s, rbws-anim-terminal-output-cursor-visibility 0s linear forwards 6.57s;
  margin-right: 1ch;
}
#punch-cards-terminal.js-is-in-view .rbws-c-terminal__line:nth-child(6) .rbws-c-terminal__line-segment:nth-child(2) {
  /* Show the output line all at once after the specified delay. */
  color: #BDBDBD;
  animation: rbws-anim-show-immediate 0s linear forwards 7.07s;
  /* Add the animation time to the counter. */
}
#punch-cards-terminal.js-is-in-view .rbws-c-terminal__line:nth-child(6) .rbws-c-terminal__line-segment:nth-child(2):before {
  /*
         * Show the cursor at the start of the line immediately, but
         * hide it when we're ready to show output.
         */
  content: "_";
  display: inline;
  animation: rbws-anim-terminal-cursor-blink 0.5s step-start infinite 6.57s, rbws-anim-terminal-output-cursor-visibility 0.5s linear forwards 6.57s;
  margin-right: 1ch;
}
#punch-cards-terminal.js-is-in-view .rbws-c-terminal__line:nth-child(7) {
  /* If it's a typing line... */
  /* If it's output... */
}
#punch-cards-terminal.js-is-in-view .rbws-c-terminal__line:nth-child(7) .rbws-c-terminal__line-segment:nth-child(1) {
  /* Show the output line all at once after the specified delay. */
  color: #BDBDBD;
  animation: rbws-anim-show-immediate 0s linear forwards 7.57s;
  /* Add the animation time to the counter. */
}
#punch-cards-terminal.js-is-in-view .rbws-c-terminal__line:nth-child(7) .rbws-c-terminal__line-segment:nth-child(1):before {
  /*
         * Show the cursor at the start of the line immediately, but
         * hide it when we're ready to show output.
         */
  content: "_";
  display: inline;
  animation: rbws-anim-terminal-cursor-blink 0.5s step-start infinite 7.57s, rbws-anim-terminal-output-cursor-visibility 0s linear forwards 7.57s;
  margin-right: 1ch;
}
#punch-cards-terminal.js-is-in-view .rbws-c-terminal__line:nth-child(7) .rbws-c-terminal__line-segment:nth-child(2) {
  /* Show the output line all at once after the specified delay. */
  color: #BDBDBD;
  animation: rbws-anim-show-immediate 0s linear forwards 8.07s;
  /* Add the animation time to the counter. */
}
#punch-cards-terminal.js-is-in-view .rbws-c-terminal__line:nth-child(7) .rbws-c-terminal__line-segment:nth-child(2):before {
  /*
         * Show the cursor at the start of the line immediately, but
         * hide it when we're ready to show output.
         */
  content: "_";
  display: inline;
  animation: rbws-anim-terminal-cursor-blink 0.5s step-start infinite 7.57s, rbws-anim-terminal-output-cursor-visibility 0.5s linear forwards 7.57s;
  margin-right: 1ch;
}
#punch-cards-terminal.js-is-in-view .rbws-c-terminal__line:nth-child(8) {
  /* If it's a typing line... */
  /* If it's output... */
  /* Show the output line all at once after the specified delay. */
  color: #BDBDBD;
  animation: rbws-anim-show-immediate 0s linear forwards 8.57s;
  /* Add the animation time to the counter. */
}
#punch-cards-terminal.js-is-in-view .rbws-c-terminal__line:nth-child(8):before {
  /*
         * Show the cursor at the start of the line immediately, but
         * hide it when we're ready to show output.
         */
  content: "_";
  display: inline;
  animation: rbws-anim-terminal-cursor-blink 0.5s step-start infinite 8.57s, rbws-anim-terminal-output-cursor-visibility 0s linear forwards 8.57s;
  margin-right: 1ch;
}
#punch-cards-terminal.js-is-in-view .rbws-c-terminal__line:nth-child(9) {
  /* If it's a typing line... */
  /* If it's output... */
}
#punch-cards-terminal.js-is-in-view .rbws-c-terminal__line:nth-child(9) .rbws-c-terminal__line-segment:nth-child(1) {
  /* Show the output line all at once after the specified delay. */
  color: #BDBDBD;
  animation: rbws-anim-show-immediate 0s linear forwards 9.07s;
  /* Add the animation time to the counter. */
}
#punch-cards-terminal.js-is-in-view .rbws-c-terminal__line:nth-child(9) .rbws-c-terminal__line-segment:nth-child(1):before {
  /*
         * Show the cursor at the start of the line immediately, but
         * hide it when we're ready to show output.
         */
  content: "_";
  display: inline;
  animation: rbws-anim-terminal-cursor-blink 0.5s step-start infinite 9.07s, rbws-anim-terminal-output-cursor-visibility 0s linear forwards 9.07s;
  margin-right: 1ch;
}
#punch-cards-terminal.js-is-in-view .rbws-c-terminal__line:nth-child(9) .rbws-c-terminal__line-segment:nth-child(2) {
  /* Show the output line all at once after the specified delay. */
  color: #BDBDBD;
  animation: rbws-anim-show-immediate 0s linear forwards 9.57s;
  /* Add the animation time to the counter. */
}
#punch-cards-terminal.js-is-in-view .rbws-c-terminal__line:nth-child(9) .rbws-c-terminal__line-segment:nth-child(2):before {
  /*
         * Show the cursor at the start of the line immediately, but
         * hide it when we're ready to show output.
         */
  content: "_";
  display: inline;
  animation: rbws-anim-terminal-cursor-blink 0.5s step-start infinite 9.07s, rbws-anim-terminal-output-cursor-visibility 0.5s linear forwards 9.07s;
  margin-right: 1ch;
}
#punch-cards-terminal.js-is-in-view .rbws-c-terminal__line:nth-child(10) {
  /* If it's a typing line... */
  /* If it's output... */
  /* Show the output line all at once after the specified delay. */
  color: #BDBDBD;
  animation: rbws-anim-show-immediate 0s linear forwards 10.07s;
  /* Add the animation time to the counter. */
}
#punch-cards-terminal.js-is-in-view .rbws-c-terminal__line:nth-child(10):before {
  /*
         * Show the cursor at the start of the line immediately, but
         * hide it when we're ready to show output.
         */
  content: "_";
  display: inline;
  animation: rbws-anim-terminal-cursor-blink 0.5s step-start infinite 10.07s, rbws-anim-terminal-output-cursor-visibility 0s linear forwards 10.07s;
  margin-right: 1ch;
}
#punch-cards-terminal.js-is-in-view .rbws-c-terminal__line:nth-child(11) {
  /* If it's a typing line... */
  /* If it's output... */
  /* Show the output line all at once after the specified delay. */
  color: #BDBDBD;
  animation: rbws-anim-show-immediate 0s linear forwards 11.07s;
  /* Add the animation time to the counter. */
}
#punch-cards-terminal.js-is-in-view .rbws-c-terminal__line:nth-child(11):before {
  /*
         * Show the cursor at the start of the line immediately, but
         * hide it when we're ready to show output.
         */
  content: "_";
  display: inline;
  animation: rbws-anim-terminal-cursor-blink 0.5s step-start infinite 11.07s, rbws-anim-terminal-output-cursor-visibility 0s linear forwards 11.07s;
  margin-right: 1ch;
}
#punch-cards-terminal.js-is-in-view .rbws-c-terminal__line:nth-child(12) {
  /* If it's a typing line... */
  /* If it's output... */
  /* Show the output line all at once after the specified delay. */
  color: #BDBDBD;
  animation: rbws-anim-show-immediate 0s linear forwards 12.07s;
  /* Add the animation time to the counter. */
}
#punch-cards-terminal.js-is-in-view .rbws-c-terminal__line:nth-child(12):before {
  /*
         * Show the cursor at the start of the line immediately, but
         * hide it when we're ready to show output.
         */
  content: "_";
  display: inline;
  animation: rbws-anim-terminal-cursor-blink 0.5s step-start infinite 12.07s, rbws-anim-terminal-output-cursor-visibility 0s linear forwards 12.07s;
  margin-right: 1ch;
}
#punch-cards-terminal.js-is-in-view .rbws-c-terminal__line:nth-child(13) {
  /* If it's a typing line... */
  /* If it's output... */
  /* Show the output line all at once after the specified delay. */
  color: #BDBDBD;
  animation: rbws-anim-show-immediate 0s linear forwards 12.07s;
  /* Add the animation time to the counter. */
}
#punch-cards-terminal.js-is-in-view .rbws-c-terminal__line:nth-child(13):before {
  /*
         * Show the cursor at the start of the line immediately, but
         * hide it when we're ready to show output.
         */
  content: "_";
  display: inline;
  animation: rbws-anim-terminal-cursor-blink 0.5s step-start infinite 12.07s, rbws-anim-terminal-output-cursor-visibility 0s linear forwards 12.07s;
  margin-right: 1ch;
}
#punch-cards-terminal.js-is-in-view .rbws-c-terminal__line:nth-child(14) {
  /* If it's a typing line... */
  /* If it's output... */
  /* Show the output line all at once after the specified delay. */
  color: #BDBDBD;
  animation: rbws-anim-show-immediate 0s linear forwards 12.07s;
  /* Add the animation time to the counter. */
}
#punch-cards-terminal.js-is-in-view .rbws-c-terminal__line:nth-child(14):before {
  /*
         * Show the cursor at the start of the line immediately, but
         * hide it when we're ready to show output.
         */
  content: "_";
  display: inline;
  animation: rbws-anim-terminal-cursor-blink 0.5s step-start infinite 12.07s, rbws-anim-terminal-output-cursor-visibility 0s linear forwards 12.07s;
  margin-right: 1ch;
}
#punch-cards-terminal.js-is-in-view .rbws-c-terminal__line:nth-child(15) {
  /* If it's a typing line... */
  /* If it's output... */
  /* Show the output line all at once after the specified delay. */
  color: #BDBDBD;
  animation: rbws-anim-show-immediate 0s linear forwards 12.07s;
  /* Add the animation time to the counter. */
}
#punch-cards-terminal.js-is-in-view .rbws-c-terminal__line:nth-child(15):before {
  /*
         * Show the cursor at the start of the line immediately, but
         * hide it when we're ready to show output.
         */
  content: "_";
  display: inline;
  animation: rbws-anim-terminal-cursor-blink 0.5s step-start infinite 12.07s, rbws-anim-terminal-output-cursor-visibility 0s linear forwards 12.07s;
  margin-right: 1ch;
}
#punch-cards-terminal.js-is-in-view .rbws-c-terminal__line:nth-child(16) {
  /* If it's a typing line... */
  /* If it's output... */
  /* Show the output line all at once after the specified delay. */
  color: #BDBDBD;
  animation: rbws-anim-show-immediate 0s linear forwards 12.07s;
  /* Add the animation time to the counter. */
}
#punch-cards-terminal.js-is-in-view .rbws-c-terminal__line:nth-child(16):before {
  /*
         * Show the cursor at the start of the line immediately, but
         * hide it when we're ready to show output.
         */
  content: "_";
  display: inline;
  animation: rbws-anim-terminal-cursor-blink 0.5s step-start infinite 12.07s, rbws-anim-terminal-output-cursor-visibility 0s linear forwards 12.07s;
  margin-right: 1ch;
}
#punch-cards-terminal.js-is-in-view .rbws-c-terminal__line:nth-child(17) {
  /* If it's a typing line... */
  /* Add the animation time to the counter. */
  /* If it's output... */
}
@keyframes rbws-anim-terminal-punch-cards-upload-17 {
  0% {
    width: 0;
  }
  100% {
    width: 0ch;
  }
}
#punch-cards-terminal.js-is-in-view .rbws-c-terminal__line:nth-child(17):after {
  /*
               * Show the cursor at the end of the typed text, and then hide
               * it when typing concludes.
               */
  content: "_";
  display: inline;
  animation: rbws-anim-terminal-cursor-blink 0.5s step-start infinite 12.07s, rbws-anim-show-while-animating 0s linear forwards 12.07s;
  visibility: hidden;
}
#punch-cards-terminal.js-is-in-view .rbws-c-terminal__line:nth-child(17) .rbws-c-terminal__input {
  /* Show an animation simulating typing. */
  animation: rbws-anim-terminal-punch-cards-upload-17 0s steps(0, end) forwards 12.07s;
}
#punch-cards-terminal.js-is-in-view .rbws-c-terminal__line:nth-child(17) .rbws-c-terminal__prompt {
  /*
               * Older versions of Safari don't like 0 second animations, so
               * we're using 0.01s, which works.
               */
  animation: rbws-anim-show-immediate 0.01s linear forwards 12.07s;
}
#punch-cards-terminal.js-is-in-view .rbws-c-terminal__cursor:after {
  animation: rbws-anim-terminal-cursor-blink 0.5s step-start infinite, rbws-anim-terminal-end 12.07s linear forwards 0s;
  visibility: hidden;
}
/*# sourceMappingURL=punch-cards.css.map */