/**
 * A row of previews for different content review modes.
 *
 * This lays out a row of content review modes that each have a label
 * below it describing the review mode.
 *
 * It's used for Image Review, but can be used for others in the future.
 *
 * Structure:
 *     <div class="rbws-c-tour-content-review-modes">
 *      <div class="rbws-c-tour-content-review-modes__mode">...</div>  [1+]
 *     </div>
 */
.rbws-c-tour-content-review-modes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ink-u-spacing-l) var(--ink-u-spacing-m);
  justify-content: center;
  margin-top: var(--ink-u-spacing-xl);
  /**
   * The label describing a review mode's preview.
   *
   * Structure:
   *     <div class="rbws-c-tour-content-review-modes__label">
   *      html...
   *     </div>
   */
  /**
   * A single review mode, containing a preview and its label.
   *
   * Structure:
   *     <div class="rbws-c-tour-content-review-modes__mode">
   *      <div class="rbws-c-tour-content-review-modes__preview">...</div>
   *      <div class="rbws-c-tour-content-review-modes__label">...</div>
   *     </div>
   */
  /**
   * The container for a review mode's static or animated preview.
   *
   * Structure:
   *     <div class="rbws-c-tour-content-review-modes__preview">
   *      html...
   *     </div>
   */
}
.rbws-c-tour-content-review-modes__label {
  font-size: var(--ink-u-font-l);
  font-weight: bold;
  margin-top: var(--ink-u-spacing-m);
  text-align: center;
}
.rbws-c-tour-content-review-modes__mode {
  display: flex;
  flex-direction: column;
}
.rbws-c-tour-content-review-modes__preview {
  flex-grow: 1;
}
@media only screen and (max-width: 900px) {
  .rbws-c-tour-content-review-modes {
    flex-direction: column;
    gap: var(--ink-u-spacing-xl);
  }
}
/**
 * The dashboard tour for the front page.
 *
 * DOM Attributes:
 *     aria-description (string):
 *         A description of the contents of the color diff.
 *
 *     aria-label (string):
 *         A label identifying this instance of the color diff.
 *
 * Structure:
 *     <div class="rbws-c-tour-dashboard"
 *          aria-label="..."
 *          aria-description="..."
 *      <div class="rbws-c-tour-dashboard__sidebar">...</div>
 *      <div class="rbws-c-tour-dashboard__box">...</div>
 *     </div>
 */
.rbws-c-tour-dashboard {
  display: flex;
  font-size: var(--ink-u-font-s);
  overflow-x: auto;
  /* Leave enough room for the box shadow without clipping it. */
  padding: 4px;
  /**
   * An avatar shown in the dashboard grid.
   *
   * Structure:
   *     <img class="rbws-c-tour-dashboard__avatar" ... />
   */
  /**
   * The main body of the dashboard grid.
   *
   * Structure:
   *     <tbody class="rbws-c-tour-dashboard__body">
   *      <tr class="rbws-c-tour-dashboard__body-row">...</tr>  [1+]
   *     </tbody>
   */
  /**
   * A cell in the dashboard grid.
   *
   * Structure:
   *     <td class="rbws-c-tour-dashboard__body-cell">
   *      html...
   *     </td>
   */
  /**
   * A row in the dashboard grid.
   *
   * Structure:
   *     <tr class="rbws-c-tour-dashboard__body-row">
   *      <td class="rbws-c-tour-dashboard__body-cell">...</td>  [1+]
   *     </tr>
   */
  /**
   * The main box containing the dashboard grid and footer.
   *
   * Structure:
   *     <div class="rbws-c-tour-dashboard__box">
   *      <table class="rbws-c-tour-dashboard__grid">...</table>
   *      <div class="rbws-c-tour-dashboard__footer">...</div>
   *     </div>
   */
  /**
   * The footer in the dashboard.
   *
   * Structure:
   *     <div class="rbws-c-tour-dashboard__footer">
   *      <div class="rbws-c-tour-dashboard__paginator">...</div>
   *     </div>
   */
  /**
   * The grid containing the dashboard header and items.
   *
   * Structure:
   *     <table class="rbws-c-tour-dashboard__grid">
   *      <thead class="rbws-c-tour-dashboard__header">...</thead>
   *      <tbody class="rbws-c-tour-dashboard__body">...</tbody>
   *     </table>
   */
  /**
   * The dashboard grid header.
   *
   * Structure:
   *     <thead class="rbws-c-tour-dashboard__header">
   *      <tr class="rbws-c-tour-dashboard__header-row">...</tr>
   *     </thead>
   */
  /**
   * A column header.
   *
   * Structure:
   *     <th class="rbws-c-tour-dashboard__header-column">
   *      html...
   *     </th>
   */
  /**
   * The dashboard grid header row.
   *
   * Structure:
   *     <tr class="rbws-c-tour-dashboard__header-row">
   *      <th class="rbws-c-tour-dashboard__header-column">...</th>  [1+]
   *     </tr>
   */
  /**
   * A label showing the number of issues.
   *
   * Structure:
   *     <span class="rbws-c-tour-dashboard__label-issues">
   *      ...
   *     </span>
   */
  /**
   * A label showing the number of Ship Its.
   *
   * Structure:
   *     <span class="rbws-c-tour-dashboard__label-shipit">
   *      ...
   *     </span>
   */
  /**
   * The paginator in the footer.
   *
   * Structure:
   *     <div class="rbws-c-tour-dashboard__paginator">
   *      <div class="rbws-c-tour-dashboard__page ..." ...>...</div>  [1+]
   *      <div class="rbws-c-tour-dashboard__page-count">...</div>
   *     </div>
   */
  /**
   * A page in the paginator.
   *
   * Modifiers:
   *     -is-active:
   *         Whether this page is shown as active.
   *
   * Structure:
   *     <div class="rbws-c-tour-dashboard__page [-is-active]">
   *      text...
   *     </div>
   */
  /**
   * The page count in the paginator.
   *
   * Structure:
   *     <div class="rbws-c-tour-dashboard__page-count">
   *      text...
   *     </div>
   */
  /**
   * An icon showing the New Updates blue dot.
   *
   * Structure:
   *     <span class="rbws-c-tour-dashboard__new-updates"></span>
   */
  /**
   * The sidebar for the dashboard.
   *
   * Structure:
   *     <ul class="rbws-c-tour-dashboard__sidebar">
   *      <li class="rbws-c-tour-dashboard__sidebar-section">...</li>  [1+]
   *     </ul>
   */
  /**
   * An item in the sidebar.
   *
   * Structure:
   *     <li class="rbws-c-tour-dashboard__sidebar-item">
   *      <span class="rbws-c-tour-dashboard__sidebar-item-label">...</span>
   *      <span class="rbws-c-tour-dashboard__sidebar-item-count">...</span>
   *     </li>
   */
  /**
   * The label for an item.
   *
   * Structure:
   *     <span class="rbws-c-tour-dashboard__sidebar-item-label">
   *      text...
   *     </span>
   */
  /**
   * The count for an item.
   *
   * Structure:
   *     <span class="rbws-c-tour-dashboard__sidebar-item-count">
   *      text...
   *     </span>
   */
  /**
   * A list of items in the sidebar.
   *
   * Structure:
   *     <ul class="rbws-c-tour-dashboard__sidebar-items">
   *      <li class="rbws-c-tour-dashboard__sidebar-item">...</li>  [1+]
   *     </ul>
   */
  /**
   * A section within the sidebar.
   *
   * Structure:
   *     <li class="rbws-c-tour-dashboard__sidebar-section">
   *      <div class="rbws-c-tour-dashboard__sidebar-section-title">...</div>
   *      <ul class="rbws-c-tour-dashboard__sidebar-items">...</ul>
   *     </li>
   */
  /**
   * The title for a section.
   *
   * Structure:
   *     <div class="rbws-c-tour-dashboard__sidebar-section-title">
   *      text...
   *     </div>
   */
}
.rbws-c-tour-dashboard__avatar {
  border-radius: 50%;
  vertical-align: middle;
}
.rbws-c-tour-dashboard__body-cell:nth-child(3) {
  /* Give the Summary column some breathing room. */
  min-width: 20em;
}
.rbws-c-tour-dashboard__box {
  border: 1px rgba(0, 0, 0, 0.4) solid;
  border-radius: var(--ink-u-border-radius-std);
  box-shadow: var(--ink-g-shadow-std);
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow: clip;
}
.rbws-c-tour-dashboard__footer {
  border-top: 1px grey solid;
}
.rbws-c-tour-dashboard__footer > tr > td {
  padding: 0;
}
.rbws-c-tour-dashboard__grid {
  border: 0;
  border-collapse: collapse;
  display: grid;
  grid-auto-rows: min-content;
  grid-template-columns: min-content max-content 1fr max-content max-content max-content;
}
.rbws-c-tour-dashboard__header {
  background: #D0E6FF;
  border-bottom: 1px blue solid;
}
.rbws-c-tour-dashboard__header-column {
  white-space: nowrap;
}
.rbws-c-tour-dashboard__header-column .ink-i-sort-descending,
.rbws-c-tour-dashboard__header-column .ink-i-unsort {
  vertical-align: middle;
}
.rbws-c-tour-dashboard__label-issues {
  background: linear-gradient(to bottom, #FFF39F 65%, #FFE106);
  border: 1px #BBA100 solid;
}
.rbws-c-tour-dashboard__label-shipit {
  background: linear-gradient(to bottom, #A3FF1C 65%, #83D429);
  border: 1px #53A300 solid;
}
.rbws-c-tour-dashboard__paginator {
  background: #EEEEEE;
  display: flex;
  padding-left: var(--ink-u-spacing-sm);
  text-align: left;
}
.rbws-c-tour-dashboard__paginator-page {
  border-bottom: 2px transparent solid;
}
.rbws-c-tour-dashboard__paginator-page.-is-active {
  font-weight: bold;
  border-bottom-color: black;
}
.rbws-c-tour-dashboard__new-updates::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #1774FF;
  border: 1px #035CE0 solid;
}
.rbws-c-tour-dashboard__sidebar {
  padding: 0;
  gap: var(--ink-u-spacing-l);
}
.rbws-c-tour-dashboard__sidebar-item {
  display: flex;
  list-style: none;
  margin: 0;
  gap: var(--ink-u-spacing-l);
}
.rbws-c-tour-dashboard__sidebar-item-label {
  flex: 1;
}
.rbws-c-tour-dashboard__sidebar-item-count {
  color: var(--ink-p-blue-700);
  font-size: 80%;
}
.rbws-c-tour-dashboard__sidebar-items {
  display: flex;
  flex-direction: column;
  padding: 0 0 0 var(--ink-u-spacing-m);
}
.rbws-c-tour-dashboard__sidebar-section-title {
  font-weight: bold;
  text-transform: uppercase;
}
.rbws-c-tour-dashboard__body-row,
.rbws-c-tour-dashboard__header-row {
  display: grid;
  align-items: baseline;
  grid-template-columns: subgrid;
}
.rbws-c-tour-dashboard__body,
.rbws-c-tour-dashboard__header {
  display: grid;
  grid-template-columns: subgrid;
  text-align: left;
}
.rbws-c-tour-dashboard__body-cell,
.rbws-c-tour-dashboard__header-column {
  padding: var(--ink-u-spacing-sm);
}
.rbws-c-tour-dashboard__body,
.rbws-c-tour-dashboard__body-row,
.rbws-c-tour-dashboard__footer,
.rbws-c-tour-dashboard__header,
.rbws-c-tour-dashboard__header-row {
  grid-column: 1 / -1;
  height: min-content;
}
.rbws-c-tour-dashboard__label-issues,
.rbws-c-tour-dashboard__label-shipit {
  border-radius: 1em;
  display: block;
  padding: var(--ink-u-spacing-xs) var(--ink-u-spacing-sm);
  text-align: center;
  text-shadow: 0 0 3px rgba(255, 255, 255, 0.4);
}
.rbws-c-tour-dashboard__paginator-page,
.rbws-c-tour-dashboard__paginator-page-count {
  padding: var(--ink-u-spacing-sm);
}
.rbws-c-tour-dashboard__sidebar-items,
.rbws-c-tour-dashboard__sidebar-section {
  text-align: left;
}
.rbws-c-tour-dashboard__sidebar-item,
.rbws-c-tour-dashboard__sidebar-section-title {
  padding: var(--ink-u-spacing-sm);
  padding-right: var(--ink-u-spacing-l);
}
.rbws-c-tour-dashboard__sidebar,
.rbws-c-tour-dashboard__sidebar-items,
.rbws-c-tour-dashboard__sidebar-section {
  display: flex;
  flex-direction: column;
  margin: 0;
}
@media only screen and (max-width: 1079px) {
  .rbws-c-tour-dashboard__sidebar {
    display: none;
  }
}
@keyframes rbws-anim-tour-dashboard-show-row {
  0% {
    opacity: 0;
  }
  99%,
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/**
 * A representation of a multi-page document review with diffing.
 *
 * This shows a depiction of the doc review UI as a small sidebar of
 * thumbnails and a main document area. The animation cycles through each
 * page in sequence, updating the sidebar and sliding out a modified
 * document, showing diff markers applied, before switching to the next
 * page.
 *
 * Accessibility Notes:
 *     Since most of this is pure animation and images, we hide all the
 *     UI and just leave it to an ``aria-description`` to describe it.
 *
 * DOM Attributes:
 *     aria-description (string):
 *         A description of the contents of the color diff.
 *
 *     aria-label (string):
 *         A label identifying this instance of the color diff.
 *
 *     role (string):
 *         "img".
 *
 * Structure:
 *     <div class="rbws-c-tour-doc-review"
 *          aria-label="..."
 *          aria-description="..."
 *          role="img">
 *      <div class="rbws-c-tour-doc-review__thumbs" ...>...</div>
 *      <div class="rbws-c-tour-doc-review__main" ...>...</div>
 *     </div>
 */
.rbws-c-tour-doc-review {
  display: flex;
  flex-direction: row;
  gap: var(--ink-u-spacing-l);
  margin: 0 auto;
  /**
   * A marker highlighting deleted content on a page.
   *
   * Structure:
   *     <rect class="rbws-c-tour-doc-review__delete-marker"
   *           x="..."
   *           y="..."
   *           width="..."
   *           height="...">
   */
  /**
   * A collection of diff markers.
   *
   * Structure:
   *     <svg class="rbws-c-tour-doc-review__diff-markers">
   *          viewBox="..."
   *          width="..."
   *          height="...">
   *      {
   *       <rect class="rbws-c-tour-doc-review__delete-marker" ...>...</rect>
   *       |
   *       <rect class="rbws-c-tour-doc-review__insert-marker" ...>...</rect>
   *      }  [0+]
   *     </svg>
   */
  /**
   * A marker highlighting inserted content on a page.
   *
   * Structure:
   *     <rect class="rbws-c-tour-doc-review__insert-marker"
   *           x="..."
   *           y="..."
   *           width="..."
   *           height="...">
   */
  /**
   * A thumbnail for a page.
   *
   * The active page is highlighted.
   *
   * DOM Attributes:
   *     role (string):
   *         "img".
   *
   * Structure:
   *     <div class="rbws-c-tour-doc-review__thumb rbws-c-screenshot"
   *          role="img">
   *      <img class="rbws-c-screenshot__image" ...>
   *     </div>
   */
  /**
   * The column of page thumbnails.
   *
   * Structure:
   *     <div class="rbws-c-tour-doc-review__thumbs">
   *      <div class="rbws-c-tour-doc-review__thumb rbws-c-screenshot"
   *           ...>...</div>  [1+]
   *     </div>
   */
  /**
   * The container holding the original and modified page stacks.
   *
   * Structure:
   *     <div class="rbws-c-tour-doc-review__main">
   *      <div class="rbws-c-tour-doc-review__orig">...</div>
   *      <div class="rbws-c-tour-doc-review__modified">...</div>
   *     </div>
   */
  /**
   * The stack of pages for the modified revision.
   *
   * Structure:
   *     <div class="rbws-c-tour-doc-review__modified">
   *      <div class="rbws-c-tour-doc-review__pages">...</div>
   *     </div>
   */
  /**
   * The stack of pages for the original revision.
   *
   * Structure:
   *     <div class="rbws-c-tour-doc-review__orig">
   *      <div class="rbws-c-tour-doc-review__pages">...</div>
   *     </div>
   */
  /**
   * A single page with any overlaid markers.
   *
   * Structure:
   *     <div class="rbws-c-tour-doc-review__page">
   *      <div class="rbws-c-screenshot" role="img">
   *       <img class="rbws-c-screenshot__image" ... />
   *       <div class="rbws-c-screenshot__overlay">
   *        <svg class="rbws-c-tour-doc-review__diff-markers">...</svg>
   *       </div>
   *      </div>
   *     </div>
   */
  /**
   * The stack of pages within an original or modified section.
   *
   * Structure:
   *     <div class="rbws-c-tour-doc-review__pages">
   *      <div class="rbws-c-tour-doc-review__page">...</div>  [1+]
   *     </div>
   */
}
.rbws-c-tour-doc-review__delete-marker {
  fill: #FF9C9C;
}
.rbws-c-tour-doc-review__diff-markers {
  max-width: 100%;
  height: auto;
}
.rbws-c-tour-doc-review__insert-marker {
  fill: #A9FF8A;
}
.rbws-c-tour-doc-review__thumb {
  padding: var(--ink-u-spacing-s);
  position: relative;
}
.rbws-c-tour-doc-review__thumb:first-child::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: var(--ink-p-blue-400);
  border-radius: var(--ink-u-border-radius-m);
  transition: 0.2s ease-in-out transform;
}
.rbws-c-tour-doc-review__thumbs {
  display: flex;
  flex-direction: column;
}
.rbws-c-tour-doc-review__main {
  display: flex;
  gap: var(--ink-u-spacing-m);
}
.rbws-c-tour-doc-review__modified .rbws-c-tour-doc-review__page {
  opacity: 0;
  transform: translateX(-100%);
}
.rbws-c-tour-doc-review__orig {
  z-index: 1;
}
.rbws-c-tour-doc-review__page {
  position: relative;
  transition: 0.2s ease-in-out transform;
}
.rbws-c-tour-doc-review__page .rbws-c-screenshot__image {
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}
.rbws-c-tour-doc-review__page,
.rbws-c-tour-doc-review__page .rbws-c-screenshot__overlay {
  padding-right: 6px;
  padding-bottom: 10px;
}
.rbws-c-tour-doc-review__page .rbws-c-screenshot__overlay {
  mix-blend-mode: multiply;
}
.rbws-c-tour-doc-review__pages {
  display: flex;
  flex-direction: column;
  transition: 0.2s ease-in-out transform;
}
.rbws-c-tour-doc-review__delete-marker,
.rbws-c-tour-doc-review__insert-marker {
  position: absolute;
  transform-box: fill-box;
  transform-origin: top left;
}
.rbws-c-tour-doc-review__modified,
.rbws-c-tour-doc-review__orig {
  display: flex;
  overflow-y: clip;
  aspect-ratio: 8.5 / 11;
}
@media only screen and (max-width: 900px) {
  .rbws-c-tour-doc-review__main {
    gap: var(--ink-u-spacing-s);
  }
  .rbws-c-tour-doc-review__thumbs {
    display: none;
  }
}
/**
 * An color diff showing the pixel differences between images.
 *
 * This shows the original and modified revisions side-by-side, and, once
 * animated (see ``#rbws-ns-ui.tour-image-color-diff().animate()``), slides
 * them together and then fades in a version of the image with colors merged.
 *
 * DOM Attributes:
 *     aria-description (string):
 *         A description of the contents of the color diff.
 *
 *     aria-label (string):
 *         A label identifying this instance of the color diff.
 *
 *     role (string):
 *         "img", always.
 *
 * Structure:
 *     <div class="rbws-c-tour-image-color-diff"
 *          aria-label="..."
 *          aria-description="..."
 *          role="img">
 *      <img class="rbws-c-tour-image-color-diff__orig-revision" ... />
 *      <img class="rbws-c-tour-image-color-diff__merged" ... />
 *      <img class="rbws-c-tour-image-color-diff__modified-revision" ... />
 *     </div>
 */
.rbws-c-tour-image-color-diff {
  display: flex;
  justify-content: center;
  position: relative;
  /**
   * The merged color diff version of the image.
   *
   * Structure:
   *     <img class="rbws-c-tour-image-color-diff__merged" ...>
   */
  /**
   * The modified revision of the image.
   *
   * Structure:
   *     <img class="rbws-c-tour-image-color-diff__modified-revision" ...>
   */
  /**
   * The original revision of the image.
   *
   * Structure:
   *     <img class="rbws-c-tour-image-color-diff__orig-revision" ...>
   */
}
.rbws-c-tour-image-color-diff__merged {
  position: absolute;
  opacity: 0;
  z-index: 1;
}
.rbws-c-tour-image-color-diff__modified-revision,
.rbws-c-tour-image-color-diff__orig-revision {
  position: relative;
  transition: 0.2s linear all;
}
@keyframes rbws-anim-image-color-diff-merged-show {
  0% {
    opacity: 0;
  }
  99%,
  100% {
    opacity: 1;
  }
}
@keyframes rbws-anim-image-color-diff-modified-slide {
  0% {
    opacity: 1;
  }
  99%,
  100% {
    transform: translateX(-50%);
    opacity: 0.4;
  }
}
@keyframes rbws-anim-image-color-diff-original-slide {
  0% {
    opacity: 1;
  }
  99%,
  100% {
    transform: translateX(50%);
    opacity: 0.4;
  }
}
/**
 * An onion skin diff using transparency to see image differences.
 *
 * This shows the original and modified revisions stacked on top of each
 * other, along with a slider that controls the transparency level of the
 * top-most image.
 *
 * The animation will move the slider back-and-forth and change the
 * transparency of the modified image to match.
 *
 * DOM Attributes:
 *     aria-description (string):
 *         A description of the contents of the color diff.
 *
 *     aria-label (string):
 *         A label identifying this instance of the color diff.
 *
 *     role (string):
 *         "img", always.
 *
 * Structure:
 *     <div class="rbws-c-tour-image-onion-skin-diff"
 *          aria-label="..."
 *          aria-description="..."
 *          role="img">.
 *      <img class="rbws-c-tour-image-onion-skin-diff__orig-revision" .../>
 *      <img class="rbws-c-tour-image-onion-skin-diff__modified-revision" .../>
 *      <div class="rbws-c-tour-image-onion-skin-diff__slider" ...>...</div>
 *     </div>
 */
.rbws-c-tour-image-onion-skin-diff {
  display: flex;
  justify-content: center;
  padding-bottom: var(--ink-u-spacing-s);
  position: relative;
  /**
   * The modified revision of the image.
   *
   * Structure:
   *     <img class="rbws-c-tour-image-onion-skin-diff__modified-revision"
   *          ... />
   */
  /**
   * The original revision of the image.
   *
   * Structure:
   *     <img class="rbws-c-tour-image-onion-skin-diff__orig-revision" ... />
   */
  /**
   * The transparency slider shown below the images.
   *
   * This is a visual for the animation, and not something the user can
   * modify.
   *
   * DOM Attributes:
   *     aria-hidden (boolean):
   *         ``true``.
   *
   * Structure:
   *     <div class="rbws-c-tour-image-onion-skin-diff__slider"
   *          aria-hidden="true">
   *     </div>
   */
}
.rbws-c-tour-image-onion-skin-diff__modified-revision {
  transform: translateX(-50%);
}
.rbws-c-tour-image-onion-skin-diff__orig-revision {
  transform: translateX(50%);
}
.rbws-c-tour-image-onion-skin-diff__slider {
  position: absolute;
  bottom: 0;
  width: 7em;
  height: 2px;
  margin: 0 auto;
  z-index: 1;
}
.rbws-c-tour-image-onion-skin-diff__slider::before {
  content: "";
  display: block;
  background: var(--ink-p-blue-500);
  width: 100%;
  height: 100%;
  margin: 0 auto;
}
.rbws-c-tour-image-onion-skin-diff__slider::after {
  content: "";
  display: block;
  background: var(--ink-p-blue-500);
  border-radius: 50%;
  height: 10px;
  width: 10px;
  left: 100%;
  top: 100%;
  position: absolute;
  transform: translateY(-50%);
}
.rbws-c-tour-image-onion-skin-diff__modified-revision,
.rbws-c-tour-image-onion-skin-diff__orig-revision {
  padding: var(--ink-u-spacing-xs);
  transition: 0.2s linear all;
}
@keyframes rbws-anim-image-onion-skin-diff-modified-revision {
  0%,
  8% {
    opacity: 1;
  }
  30% {
    opacity: 0.2;
  }
  30% {
    opacity: 0;
  }
  65% {
    opacity: 0.9;
  }
  75%,
  100% {
    opacity: 0.5;
  }
}
@keyframes rbws-anim-image-onion-skin-diff-slider {
  0%,
  8% {
    left: 100%;
  }
  30% {
    left: 20%;
  }
  30% {
    left: 0;
  }
  65% {
    left: 90%;
  }
  75%,
  100% {
    left: 50%;
  }
}
/**
 * A side-by-side diff between two images.
 *
 * This shows the original and modified images next to each other, each
 * surrounded by a border with a color indicating it's the original or
 * modified version.
 *
 * The animation is will unstack the images, sliding them out so they
 * appear side-by-side.
 *
 * DOM Attributes:
 *     aria-description (string):
 *         A description of the contents of the color diff.
 *
 *     aria-label (string):
 *         A label identifying this instance of the color diff.
 *
 *     role (string):
 *         "img", always.
 *
 * Structure:
 *     <div class="rbws-c-tour-image-side-by-side-diff">
 *      <img class="rbws-c-tour-image-side-by-side-diff__orig-revision"
 *           ... />
 *      <img class="rbws-c-tour-image-side-by-side-diff__modified-revision"
 *           ... />
 *     </div>
 */
.rbws-c-tour-image-side-by-side-diff {
  display: flex;
  justify-content: center;
  position: relative;
  /**
   * The modified revision of the image.
   *
   * Structure:
   *     <img class="rbws-c-tour-image-side-by-side-diff__modified-revision"
   *          .../>
   */
  /**
   * The original revision of the image.
   *
   * Structure:
   *     <img class="rbws-c-tour-image-side-by-side-diff__orig-revision"
   *          ... />
   */
}
.rbws-c-tour-image-side-by-side-diff__modified-revision {
  border-color: green;
  margin-left: var(--ink-u-spacing-xs);
  right: var(--ink-u-spacing-xs);
  transform: translateX(-50%);
}
.rbws-c-tour-image-side-by-side-diff__orig-revision {
  border-color: red;
  margin-right: var(--ink-u-spacing-xs);
  left: var(--ink-u-spacing-xs);
  transform: translateX(50%);
}
.rbws-c-tour-image-side-by-side-diff__modified-revision,
.rbws-c-tour-image-side-by-side-diff__orig-revision {
  border-radius: var(--ink-u-border-radius-l);
  border-width: 1px;
  border-style: solid;
  padding: var(--ink-u-spacing-xs);
  position: relative;
  transition: 0.2s linear all;
}
@keyframes rbws-anim-tour-image-side-by-side-diff-original-unstack {
  99%,
  100% {
    transform: none;
    left: 0;
  }
}
@keyframes rbws-anim-tour-image-side-by-side-diff-modified-unstack {
  99%,
  100% {
    transform: none;
    right: 0;
  }
}
/**
 * A Split Diff view between an original and a modified image.
 *
 * This shows two images separated by a splitter control. The original
 * image appears on the left-hand side of the image and the modified image
 * appears on the right-hand side of the image.
 *
 * This is set to animate on the tour page.
 *
 * The HTML for the component must set the ``aspect-ratio`` and ``width``
 * as appropriate for the image.
 *
 * DOM Attributes:
 *     aria-description (string):
 *         A description of the contents of the split view.
 *
 *     aria-label (string):
 *         A label identifying this instance of the split view.
 *
 *     role (string):
 *         "img", always.
 *
 * Structure:
 *     <div class="rbws-c-tour-image-split-diff"
 *          aria-description="..."
 *          aria-label="..."
 *          role="img">
 *      <div class="rbws-c-tour-image-split-diff__orig-revision">...</div>
 *      <div class="rbws-c-tour-image-split-diff__modified-revision">...</div>
 *      <div class="rbws-c-tour-image-split-diff__handle" ...>...</div>
 *     </div>
 */
.rbws-c-tour-image-split-diff {
  margin: 0 auto;
  max-width: 100%;
  position: relative;
  /**
   * The original revision, clipped to the left of the handle.
   *
   * Structure:
   *     <div class="rbws-c-tour-image-split-diff__orig-revision">
   *      <img class="rbws-c-tour-image-split-diff__image" ...>
   *     </div>
   */
  /**
   * The modified revision, clipped to the right of the handle.
   *
   * Structure:
   *     <div class="rbws-c-tour-image-split-diff__modified-revision">
   *      <img class="rbws-c-tour-image-split-diff__image" ...>
   *     </div>
   */
  /**
   * An image for one of the two revisions.
   *
   * Structure:
   *     <img class="rbws-c-tour-image-split-diff__image" ...>
   */
  /**
   * The handle separating the two revisions.
   *
   * This is a visual for the animation, and not something the user can
   * modify.
   *
   * DOM Attributes:
   *     aria-hidden (boolean):
   *         ``true``.
   *
   * Structure:
   *     <div class="rbws-c-tour-image-split-diff__handle"
   *          aria-hidden="true">
   *     </div>
   */
}
.rbws-c-tour-image-split-diff__orig-revision {
  clip-path: inset(0 0% 0 0);
}
.rbws-c-tour-image-split-diff__modified-revision {
  clip-path: inset(0 0 0 0%);
}
.rbws-c-tour-image-split-diff__image {
  display: block;
  height: 100%;
  width: 100%;
}
.rbws-c-tour-image-split-diff__handle {
  position: absolute;
  bottom: 0;
  left: 0;
  top: 0;
  opacity: 0;
  width: 2px;
  z-index: 1;
}
.rbws-c-tour-image-split-diff__handle::after {
  content: "";
  display: block;
  background: var(--ink-p-blue-500);
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 100%;
  width: 14px;
  height: 14px;
  transform: translateX(-50%);
}
.rbws-c-tour-image-split-diff__handle::before {
  content: "";
  display: block;
  background: var(--ink-p-blue-500);
  width: 100%;
  height: 100%;
}
.rbws-c-tour-image-split-diff__orig-revision,
.rbws-c-tour-image-split-diff__modified-revision {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  top: 0;
  overflow: hidden;
}
@keyframes rbws-anim-tour-image-split-diff-handle-fade {
  0% {
    opacity: 0;
  }
  99%,
  100% {
    opacity: 1;
  }
}
@keyframes rbws-anim-tour-image-split-diff-handle-x {
  0%,
  8% {
    left: 0%;
  }
  30% {
    left: 70%;
  }
  45% {
    left: 25%;
  }
  60% {
    left: 85%;
  }
  75%,
  100% {
    left: 50%;
  }
}
@keyframes rbws-anim-tour-image-split-diff-split-orig-revision {
  0%,
  8% {
    clip-path: inset(0 100% 0 0);
  }
  30% {
    clip-path: inset(0 30% 0 0);
  }
  45% {
    clip-path: inset(0 75% 0 0);
  }
  60% {
    clip-path: inset(0 15% 0 0);
  }
  75%,
  100% {
    clip-path: inset(0 50% 0 0);
  }
}
@keyframes rbws-anim-tour-image-split-diff-split-modified-revision {
  0%,
  8% {
    clip-path: inset(0 0 0 0%);
  }
  30% {
    clip-path: inset(0 0 0 70%);
  }
  45% {
    clip-path: inset(0 0 0 25%);
  }
  60% {
    clip-path: inset(0 0 0 85%);
  }
  75%,
  100% {
    clip-path: inset(0 0 0 50%);
  }
}
/**
 * The review tour for the front page.
 *
 * This simulates a desktop and mobile view of a review, providing the
 * ability to animate controls to simulate a reply and resolution process
 * for an issue.
 *
 * DOM Attributes:
 *     aria-description (string):
 *         A description of the contents of the color diff.
 *
 *     aria-label (string):
 *         A label identifying this instance of the color diff.
 *
 * Structure:
 *     <div class="rbws-c-tour-review"
 *          aria-label="..."
 *          aria-description="...">
 *      <div class="rbws-c-tour-review__user">...</div>
 *      <div class="rbws-c-tour-review__box">...</div>
 *     </div>
 */
.rbws-c-tour-review {
  display: flex;
  gap: var(--ink-u-spacing-m);
  /**
   * The avatar shown alongside the review.
   *
   * Structure:
   *     <img class="rbws-c-tour-review__avatar" ... />
   */
  /**
   * The main body of the review.
   *
   * DOM Attributes:
   *     aria-label (string):
   *         A label identifying this section.
   *
   * Structure:
   *     <div class="rbws-c-tour-review__body"
   *          aria-label="...">
   *      <div class="rbws-c-tour-review__comment">...</div>  [1+]
   *     </div>
   */
  /**
   * The main box containing the review.
   *
   * DOM Attributes:
   *     aria-label (string):
   *         A label identifying this section.
   *
   * Structure:
   *     <div class="rbws-c-tour-review__box"
   *          aria-label="...">
   *      <div class="rbws-c-tour-review__header">...</div>
   *      <div class="rbws-c-tour-review__body">...</div>
   *     </div>
   */
  /**
   * A comment in the review.
   *
   * Structure:
   *     <div class="rbws-c-tour__comment">
   *      <div class="rbws-c-tour__comment-header">...</div>
   *      <div class="rbws-c-tour__comment-context">...</div>
   *      <div class="rbws-c-tour__comment-details">...</div>
   *     </div>
   */
  /**
   * The context for a comment in the review.
   *
   * This contains the diff or file content that the comment is replying to.
   *
   * DOM Attributes:
   *     aria-label (string):
   *         A label identifying this section.
   *
   * Structure:
   *     <div class="rbws-c-tour__comment-context"
   *          aria-label="...">
   *      html...
   *     </div>
   */
  /**
   * The main details for a comment.
   *
   * Structure:
   *     <div class="rbws-c-tour__comment-details">
   *      [<div class="rbws-c-tour__comment-issue-bars">...</div>]
   *      <div class="rbws-c-tour__comment-text">...</div>
   *      [<div class="rbws-c-tour__comment-reply-container">...</div>]
   *     </div>
   */
  /**
   * The header for a comment in the review.
   *
   * This contains the filename (which should be in a ``<strong>``) and an
   * optional revision.
   *
   * DOM Attributes:
   *     aria-label (string):
   *         A label identifying this section.
   *
   * Structure:
   *     <div class="rbws-c-tour__comment-header"
   *          aria-label="...">
   *      html...
   *     </div>
   */
  /**
   * An image shown in a comment's context.
   *
   *     <img class="rbws-c-tour-review__comment-image" ... />
   */
  /**
   * An issue bar in the review.
   *
   * DOM Attributes:
   *     aria-label (string):
   *         A label identifying this section.
   *
   * Modifiers:
   *     -is-default:
   *         Whether this is is the default shown issue bar.
   *
   *     -is-fixed:
   *         Whether this is a fixed issue.
   *
   *     -is-open:
   *         Whether this is a open issue.
   *
   * Structure:
   *     <div class="rbws-c-tour-review__comment-issue-bar
   *                 [-is-default]
   *                 [-is-fixed | -is-open]"
   *          aria-label="...">
   *      text...
   *      <div class="rbws-c-tour-review__comment-issue-buttons">...</div>
   *     </div>
   */
  /**
   * The collection of issue bars for a comment.
   *
   * Multiple issue bars may be present to help animate state. Only the
   * first will be shown by default.
   *
   * DOM Attributes:
   *     aria-label (string):
   *         A label identifying this section.
   *
   * Structure:
   *     <div class="rbws-c-tour__comment-issue-bars"
   *          aria-label="...">
   *      <div class="rbws-c-tour__comment-issue-bar">...</div>  [1+]
   *     </div>
   */
  /**
   * The list of buttons on the issue bar.
   *
   * Structure:
   *     <div class="rbws-c-tour-review__comment-issue-buttons">
   *      <button class="ink-c-button" ...>...</button>  [1+]
   *     </div>
   */
  /**
   * A reply to a comment.
   *
   * Structure:
   *     <div class="rbws-c-tour-review__comment-reply">
   *      <img class="rbws-c-tour-review__comment-reply-avatar" ... />
   *      <div class="rbws-c-tour-review__comment-reply-field">...</div>
   *     </div>
   */
  /**
   * The Reply button for a comment.
   *
   * Structure:
   *     <button class="rbws-c-tour-review__comment-reply-button
   *                    ink-c-button">
   *      <span class="ink-c-button__icon">
   *       <span class="fa fa-reply"></span>
   *      </span>
   *      <label class="ink-c-button__label">Reply</label>
   *     </button>
   */
  /**
   * The container for replies for a comment.
   *
   * Structure:
   *     <div class="rbws-c-tour-review__comment-reply-container">
   *      <button class="rbws-c-tour-review__comment-reply-button ...">
   *       ...
   *      </button>
   *      <div class="rbws-c-tour-review__comment-reply">...</div>
   *     </div>
   */
  /**
   * The text field for entering a reply to a comment.
   *
   * Structure:
   *     <div class="rbws-c-tour-review__comment-reply-field">
   *      <span class=rbws-c-tour-review__comment-reply-text">...</span>
   *     </div>
   */
  /**
   * The replied comment text.
   *
   * This can be animated for a typing effect.
   *
   * DOM Attributes:
   *     aria-label (string):
   *         A label identifying this section.
   *
   * Structure:
   *     <span class="rbws-c-tour-review__comment-reply-text"
   *           aria-label="...">
   *      html...
   *     </span>
   */
  /**
   * The published comment text.
   *
   * DOM Attributes:
   *     aria-label (string):
   *         A label identifying this section.
   *
   * Structure:
   *     <div class="rbws-c-tour-review__comment-text"
   *          aria-label="...">
   *      html...
   *     </div>
   */
  /**
   * A diff shown in the comment's context.
   *
   * Structure:
   *     <table class="rbws-c-tour-review__diff">
   *      <tbody class="rbws-c-tour-review__diff ...">...</tbody>  [1+]
   *     </table>
   */
  /**
   * A highlighted region in a replace line.
   *
   * Structure:
   *     <span class="rbws-c-tour-review__diff-highlight">
   *      html...
   *     </span>
   */
  /**
   * The header of the review.
   *
   * This contains the reviewer's name and timestamp.
   *
   * Structure:
   *     <div class="rbws-c-tour-review__header">
   *      <div class="rbws-c-tour-review__header-author">...</div>
   *      <div class="rbws-c-tour-review__header-timestamp">...</div>
   *     </div>
   */
  /**
   * The title information in the header.
   *
   * This contains the reviewer's name and number of comments.
   *
   * Structure:
   *     <div class="rbws-c-tour-review__header-title">
   *      html...
   *     </div>
   */
  /**
   * The timestamp in the header.
   *
   * Structure:
   *     <div class="rbws-c-tour-review__header-timestamp">
   *      text...
   *     </div>
   */
  /**
   * The title in the header.
   *
   * Structure:
   *     <div class="rbws-c-tour-review__header-title">
   *      text...
   *     </div>
   */
  /**
   * A "Fix it!" label under the user avatar.
   *
   * Structure:
   *     <div class="rbws-c-tour-review__label-fix-it">
   *      Fix it!
   *     </div>
   */
  /**
   * A "Ship It!" label under the user avatar.
   *
   * Structure:
   *     <div class="rbws-c-tour-review__label-ship-it">
   *      Ship it!
   *     </div>
   */
  /**
   * A list of labels under the user avatar.
   *
   * DOM Attributes:
   *     aria-label (string):
   *         A label identifying this section.
   *
   * Structure:
   *     <div class="rbws-c-tour-review__status-labels"
   *          aria-label="...">
   *      [<div class="rbws-c-tour-review__label-fix-it">...</div>]
   *      [<div class="rbws-c-tour-review__label-ship-it">...</div>]
   *     </div>
   */
  /**
   * The user and label area of the review.
   *
   * DOM Attributes:
   *     aria-label (string):
   *         A label identifying this section.
   *
   *     aria-description (string):
   *         A brief description of this section's contents.
   *
   * Structure:
   *     <div class="rbws-c-tour-review__user"
   *          aria-description="..."
   *          aria-label="...">
   *      <img class="rbws-c-tour-review__avatar" ... />
   *      <div class="rbws-c-tour-review__status-labels">...</div>
   *     </div>
   */
  /* Switch to a mobile diff view when < 830px. */
}
.rbws-c-tour-review__avatar {
  border-radius: 50%;
  overflow: hidden;
}
.rbws-c-tour-review__body {
  display: flex;
  flex-direction: column;
  gap: var(--ink-u-spacing-m);
}
.rbws-c-tour-review__box {
  background: #FFFEF9;
  border: 1px rgba(0, 0, 0, 0.3) solid;
  border-radius: 6px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
  display: flex;
  position: relative;
  flex-direction: column;
  text-align: left;
  flex: 1;
}
.rbws-c-tour-review__box::after,
.rbws-c-tour-review__box::before {
  border: 1px transparent solid;
  content: "";
  display: block;
  position: absolute;
  height: 0;
  left: -20px;
  right: 100%;
  top: 12px;
  width: 0;
}
.rbws-c-tour-review__box::after {
  border-right-color: #D0E4FB;
  border-width: 9px;
  margin-left: 2px;
  margin-top: 1px;
}
.rbws-c-tour-review__box::before {
  border-right-color: rgba(0, 0, 0, 0.3);
  border-width: 10px;
}
.rbws-c-tour-review__comment-context {
  background: white;
  border-bottom: 1px rgba(0, 0, 0, 0.3) solid;
  overflow: hidden;
  position: relative;
}
.rbws-c-tour-review__comment-details {
  display: flex;
  flex-direction: column;
  gap: var(--ink-u-spacing-ml);
  padding: var(--ink-u-spacing-l);
}
.rbws-c-tour-review__comment-header {
  border-bottom: 1px rgba(0, 0, 0, 0.3) solid;
  border-top: 1px rgba(0, 0, 0, 0.2) solid;
  background: white;
  padding: var(--ink-u-spacing-sm) var(--ink-u-spacing-m);
}
.rbws-c-tour-review__comment-image {
  position: relative;
}
.rbws-c-tour-review__comment-issue-bar {
  background: #FFF4B0;
  border: 1px rgba(0, 0, 0, 0.2) solid;
  border-radius: 4px;
  display: flex;
  font-size: 85%;
  align-items: center;
  gap: var(--ink-u-spacing-m);
  padding: var(--ink-u-spacing-s) var(--ink-u-spacing-m);
  transition: 0.2s linear opacity;
}
.rbws-c-tour-review__comment-issue-bar::before {
  display: block;
  background-size: contain;
  background-repeat: no-repeat;
  content: "";
}
.rbws-c-tour-review__comment-issue-bar.-is-fixed {
  background: #EEEEEE;
}
.rbws-c-tour-review__comment-issue-bar.-is-fixed::before {
  width: 17px;
  height: 13px;
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 17 13" xmlns="http://www.w3.org/2000/svg" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round"><path d="M7.086 7.328 3.55 3.792 1.429 5.914l5.657 5.657 2.016-2.016 6.469-6.47L13.45.964 7.086 7.328Z" style="fill:%2381c976;fill-rule:nonzero;stroke:url(%23a);stroke-width:1px"/><defs><linearGradient id="a" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="rotate(-120 8.507 1.504) scale(9.5048)"><stop offset="0" style="stop-color:%2335782f;stop-opacity:1"/><stop offset=".16" style="stop-color:%2335782f;stop-opacity:1"/><stop offset="1" style="stop-color:%2379c06d;stop-opacity:1"/></linearGradient></defs></svg>');
}
.rbws-c-tour-review__comment-issue-bar.-is-open {
  background: #FFF4B0;
}
.rbws-c-tour-review__comment-issue-bar.-is-open::before {
  width: 16px;
  height: 16px;
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" style="fill-rule:evenodd;clip-rule:evenodd"><path d="M15.5 8a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0Z" style="fill:url(%23a);fill-rule:nonzero;stroke:%23ab0e07;stroke-width:1px"/><path d="M14.5 8a6.501 6.501 0 0 1-13 0 6.5 6.5 0 0 1 13 0Z" style="fill:none;stroke:%23ea5151;stroke-width:1px"/><defs><radialGradient id="a" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(9.8412 0 0 -9.8412 7.375 6.57)"><stop offset="0" style="stop-color:%23f24b4b;stop-opacity:1"/><stop offset="1" style="stop-color:%23f03333;stop-opacity:1"/></radialGradient></defs></svg>');
}
.rbws-c-tour-review__comment-issue-bar:not(.-is-default) {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
}
.rbws-c-tour-review__comment-issue-bars {
  position: relative;
}
.rbws-c-tour-review__comment-issue-buttons {
  display: flex;
  gap: var(--ink-u-spacing-s);
}
.rbws-c-tour-review__comment-issue-buttons .ink-c-button {
  pointer-events: none;
}
.rbws-c-tour-review__comment-reply {
  display: flex;
  gap: var(--ink-u-spacing-m);
  opacity: 0;
}
.rbws-c-tour-review__comment-reply-button {
  width: min-content;
  font-size: 85%;
  pointer-events: none;
  position: absolute;
  top: 0;
}
.rbws-c-tour-review__comment-reply-container {
  position: relative;
  padding-bottom: var(--ink-u-spacing-m);
}
.rbws-c-tour-review__comment-reply-field {
  background: white;
  border: 1px #AAAAAA solid;
  flex: 1;
  font-family: var(--ink-ff-monospace);
  padding: var(--ink-u-spacing-m);
}
.rbws-c-tour-review__comment-text {
  font-family: var(--ink-ff-monospace);
}
.rbws-c-tour-review__diff {
  border-collapse: collapse;
  font-size: 90%;
  width: 100%;
}
.rbws-c-tour-review__diff td,
.rbws-c-tour-review__diff th {
  font-family: var(--ink-ff-monospace);
  padding: 1px;
  line-height: 200%;
  vertical-align: top;
  white-space: pre-wrap;
}
.rbws-c-tour-review__diff td {
  padding-right: 2ch;
}
.rbws-c-tour-review__diff th {
  font-weight: normal;
  padding-right: 6px;
  text-align: right;
  width: 5ch;
}
.rbws-c-tour-review__diff tr:first-child {
  border-top: 1px rgba(0, 0, 0, 0.12) solid;
}
.rbws-c-tour-review__diff.-is-delete td {
  background: #FDE9ED;
}
.rbws-c-tour-review__diff.-is-delete th {
  background: #F6DBDF;
}
.rbws-c-tour-review__diff.-is-equal td {
  background: white;
}
.rbws-c-tour-review__diff.-is-equal th {
  background: #F2F2F2;
}
.rbws-c-tour-review__diff.-is-replace td {
  background: #FDFECC;
}
.rbws-c-tour-review__diff.-is-replace th {
  background: #EEEFC0;
}
.rbws-c-tour-review__diff-highlight {
  background: #FFDD61;
}
.rbws-c-tour-review__header {
  background: #D0E4FB;
  border-radius: 5px 5px 0 0;
  display: flex;
  align-items: center;
  padding: var(--ink-u-spacing-std);
}
.rbws-c-tour-review__header-author {
  flex: 1;
}
.rbws-c-tour-review__header-timestamp {
  font-size: var(--ink-u-font-sm);
}
.rbws-c-tour-review__header-title {
  flex: 1;
}
.rbws-c-tour-review__label-fix-it {
  background: #FFF4B0;
  border: 1px #B09700 solid;
  z-index: 1;
}
.rbws-c-tour-review__label-ship-it {
  background: #AEFF60;
  border: 1px #489300 solid;
  scale: 0.95;
  transform: translateY(-85%);
}
.rbws-c-tour-review__status-labels {
  position: relative;
  margin: 0 auto;
  max-width: max-content;
}
.rbws-c-tour-review__label-fix-it,
.rbws-c-tour-review__label-ship-it {
  border-radius: 6px;
  padding: var(--ink-u-spacing-xs) var(--ink-u-spacing-m);
  position: relative;
  top: 0;
  text-wrap: nowrap;
}
@media only screen and (max-width: 829px) {
  .rbws-c-tour-review {
    flex-direction: column;
    gap: var(--ink-u-spacing-s);
  }
  .rbws-c-tour-review__box::after,
  .rbws-c-tour-review__box::before {
    display: none;
  }
  .rbws-c-tour-review__comment-details {
    padding: var(--ink-u-spacing-ml);
  }
  .rbws-c-tour-review__diff {
    display: grid;
    font-size: 90%;
    grid-template-columns: max-content max-content 1fr;
  }
  .rbws-c-tour-review__diff tbody {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / 4;
  }
  .rbws-c-tour-review__diff th {
    width: 4ch;
  }
  .rbws-c-tour-review__diff tr {
    display: grid;
    grid-column: inherit;
    grid-template-columns: subgrid;
  }
  .rbws-c-tour-review__diff tr > :nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }
  .rbws-c-tour-review__diff tr > :nth-child(3) {
    grid-column: 2;
    grid-row: 1;
  }
  .rbws-c-tour-review__diff.-is-delete tr > :nth-child(2) {
    grid-column: 3;
    grid-row: 1;
  }
  .rbws-c-tour-review__diff.-is-delete tr > :nth-child(4) {
    display: none;
  }
  .rbws-c-tour-review__diff.-is-equal tr > :nth-child(2),
  .rbws-c-tour-review__diff.-is-replace tr > :nth-child(2) {
    display: none;
  }
  .rbws-c-tour-review__diff.-is-equal tr > :nth-child(4),
  .rbws-c-tour-review__diff.-is-replace tr > :nth-child(4) {
    grid-column: 3;
    grid-row: 1;
  }
  .rbws-c-tour-review__header {
    flex-direction: column;
    gap: var(--ink-u-spacing-s);
  }
  .rbws-c-tour-review__status-labels {
    max-height: 2em;
  }
}
@keyframes rbws-anim-tour-review-fixit {
  0% {
    opacity: 1;
  }
  99%,
  100% {
    opacity: 0;
    transform: translateX(-50%);
  }
}
@keyframes rbws-anim-tour-review-shipit {
  0% {
    scale: 0.95;
    transform: translateY(-85%);
  }
  99%,
  100% {
    scale: 1;
    transform: translateY(-100%);
  }
}
@keyframes rbws-anim-tour-review-hide-opacity {
  0% {
    opacity: 1;
  }
  99%,
  100% {
    opacity: 0;
  }
}
@keyframes rbws-anim-tour-review-show-opacity {
  0% {
    opacity: 0;
  }
  99%,
  100% {
    opacity: 1;
  }
}
#page-content-header .rbws-c-splash.-is-landing {
  /*
   * Set the default options based on a wide desktop display. These values
   * will be constrained in min-width media queries.
   */
  --rbws-landing-screenshot-area-width: 1165px;
  --rbws-landing-screenshot-area-height: 520px;
  --rbws-landing-screenshot-area-scale: 1;
  --rbws-landing-screenshot-comment-left: -8px;
  --rbws-landing-screenshot-comment-top: 150px;
  --rbws-landing-screenshot-comment-rows: 12;
  --rbws-landing-screenshot-comment-dlg-left: 31em;
  --rbws-landing-screenshot-comment-dlg-top: 22em;
  /* Set up responsive scaling and constraints for the screenshot area. */
  /*
   * Add some breathing room on the sides of the screenshot.
   *
   * These will be removed at the smallest screen size.
   */
  /* Position the comment dialog based on the responsive mode. */
  /* Apply a drop shadow to the diff viewer and comment dialog. */
  /*
   * Scale and transition the elements at different widths.
   *
   * This will progressively scale down the screenshot, comment row,
   * and comment dialog at different widths.
   *
   * At 970px, the media and layout will transition to showing the
   * mobile diff viewer.
   */
}
#page-content-header .rbws-c-splash.-is-landing #landing-screenshot {
  scale: var(--rbws-landing-screenshot-area-scale);
  transition: 0.2s linear height, 0.2s linear scale;
  transform-origin: top center;
  width: var(--rbws-landing-screenshot-area-width);
  height: var(--rbws-landing-screenshot-area-height);
}
#page-content-header .rbws-c-splash.-is-landing .rbws-c-screenshot__image {
  margin: 0 auto;
  min-width: var(--rbws-landing-screenshot-area-width);
}
#page-content-header .rbws-c-splash.-is-landing .rbws-c-splash__image {
  padding: 0 var(--ink-u-spacing-l);
}
#page-content-header .rbws-c-splash.-is-landing .rbws-c-tour-comment-dialog {
  opacity: 0;
  position: absolute;
  left: var(--rbws-landing-screenshot-comment-dlg-left);
  top: var(--rbws-landing-screenshot-comment-dlg-top);
}
#page-content-header .rbws-c-splash.-is-landing .rbws-c-tour-comment-dialog__text {
  font-family: monospace;
  font-size: var(--ink-u-font-std);
  position: absolute;
  left: 25px;
  top: 45px;
  text-align: left;
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  z-index: 1;
}
#page-content-header .rbws-c-splash.-is-landing .rbws-c-screenshot__image,
#page-content-header .rbws-c-splash.-is-landing .rbws-c-tour-comment-dialog__image {
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2));
}
@media only screen and (max-width: 1189px) {
  #page-content-header .rbws-c-splash.-is-landing {
    --rbws-landing-screenshot-area-height: 450px;
    --rbws-landing-screenshot-area-scale: 0.9;
  }
}
@media only screen and (max-width: 1079px) {
  #page-content-header .rbws-c-splash.-is-landing {
    --rbws-landing-screenshot-area-height: 400px;
    --rbws-landing-screenshot-area-scale: 0.8;
  }
}
@media only screen and (max-width: 969px) {
  #page-content-header .rbws-c-splash.-is-landing {
    /* < 970px is mobile mode. Transition to a mobile diff viewer. */
    --rbws-landing-screenshot-area-width: 700px;
    --rbws-landing-screenshot-area-height: 480px;
    --rbws-landing-screenshot-comment-top: 150px;
    --rbws-landing-screenshot-comment-rows: 15;
    --rbws-landing-screenshot-comment-dlg-left: 13em;
    --rbws-landing-screenshot-comment-dlg-top: 30em;
  }
  #page-content-header .rbws-c-splash.-is-landing .-is-desktop-only {
    display: none;
  }
}
@media only screen and (min-width: 970px) {
  #page-content-header .rbws-c-splash.-is-landing {
    /* >= 970px is desktop mode. */
  }
  #page-content-header .rbws-c-splash.-is-landing .-is-mobile-only {
    display: none;
  }
}
@media only screen and (max-width: 799px) {
  #page-content-header .rbws-c-splash.-is-landing {
    --rbws-landing-screenshot-area-scale: 0.7;
    --rbws-landing-screenshot-area-height: 420px;
  }
}
@media only screen and (max-width: 519px) {
  #page-content-header .rbws-c-splash.-is-landing {
    /*
     * At this size, we're starting to crop the image. Keep everything
     * left-aligned so we show the left edge of the diff viewer and comment
     * row. The comment dialog will be kept in view.
     */
  }
  #page-content-header .rbws-c-splash.-is-landing #landing-screenshot {
    transform-origin: top left;
  }
  #page-content-header .rbws-c-splash.-is-landing .rbws-c-splash__image {
    justify-content: start;
    padding-left: 0;
    padding-right: 0;
  }
}
@keyframes rbws-anim-tour-landing-screenshot-comment {
  0% {
    height: 20px;
    opacity: 0;
  }
  30% {
    height: 20px;
    opacity: 1;
  }
  100% {
    height: calc(20px * var(--rbws-landing-screenshot-comment-rows));
    opacity: 1;
  }
}
@keyframes rbws-anim-tour-landing-screenshot-typing {
  0% {
    width: 0;
  }
  100% {
    width: 42ch;
  }
}
#landing-screenshot .js-is-in-view .rbws-c-comment-row-flag {
  animation: rbws-anim-tour-landing-screenshot-comment 1.2s ease-in-out forwards 0.2s;
  left: var(--rbws-landing-screenshot-comment-left);
  top: var(--rbws-landing-screenshot-comment-top);
}
#landing-screenshot .js-is-in-view .rbws-c-tour-comment-dialog__text {
  animation: rbws-anim-tour-landing-screenshot-typing 0.8s steps(42, end) forwards 2.15s;
}
#landing-screenshot .js-is-in-view .rbws-c-tour-comment-dialog__text:before {
  content: "Phew, glad we caught this before release.";
  height: auto;
  width: auto;
}
.rbws-page-frontpage #content {
  /* Provide more room for the screenshots. */
  padding-left: 0;
  padding-right: 0;
  /*
   * Set up the styling for the Dashboard section.
   */
  /*
   * Set up the styling for the Doc Review section.
   */
  /*
   * Set up the styling for the Image Review section.
   */
}
.rbws-page-frontpage #content .rbws-c-tour-dashboard.js-is-in-view .rbws-c-tour-dashboard__body-row {
  opacity: 0;
  transform: translateY(-25%);
}
.rbws-page-frontpage #content .rbws-c-tour-dashboard.js-is-in-view .rbws-c-tour-dashboard__body-row:nth-child(1) {
  animation: rbws-anim-tour-dashboard-show-row 0.3s ease-in-out 1 forwards 0.3s;
}
.rbws-page-frontpage #content .rbws-c-tour-dashboard.js-is-in-view .rbws-c-tour-dashboard__body-row:nth-child(2) {
  animation: rbws-anim-tour-dashboard-show-row 0.3s ease-in-out 1 forwards 0.6s;
}
.rbws-page-frontpage #content .rbws-c-tour-dashboard.js-is-in-view .rbws-c-tour-dashboard__body-row:nth-child(3) {
  animation: rbws-anim-tour-dashboard-show-row 0.3s ease-in-out 1 forwards 0.9s;
}
.rbws-page-frontpage #content .rbws-c-tour-dashboard.js-is-in-view .rbws-c-tour-dashboard__body-row:nth-child(4) {
  animation: rbws-anim-tour-dashboard-show-row 0.3s ease-in-out 1 forwards 1.2s;
}
.rbws-page-frontpage #content .rbws-c-tour-dashboard.js-is-in-view .rbws-c-tour-dashboard__body-row:nth-child(5) {
  animation: rbws-anim-tour-dashboard-show-row 0.3s ease-in-out 1 forwards 1.5s;
}
.rbws-page-frontpage #content .rbws-c-tour-dashboard.js-is-in-view .rbws-c-tour-dashboard__body-row:nth-child(6) {
  animation: rbws-anim-tour-dashboard-show-row 0.3s ease-in-out 1 forwards 1.8s;
}
.rbws-page-frontpage #content .rbws-c-tour-dashboard.js-is-in-view .rbws-c-tour-dashboard__body-row:nth-child(7) {
  animation: rbws-anim-tour-dashboard-show-row 0.3s ease-in-out 1 forwards 2.1s;
}
.rbws-page-frontpage #content #doc-review .rbws-c-tour-doc-review__modified,
.rbws-page-frontpage #content #doc-review .rbws-c-tour-doc-review__orig {
  aspect-ratio: 350 / 524;
}
.rbws-page-frontpage #content #doc-review .rbws-c-tour-doc-review.js-is-in-view {
  /* Build the animation for switching pages. */
  /* Build the animation for switching thumbnails. */
  /* Build the animations for each page. */
  /* Build the animations for each page's diff markers. */
}
@keyframes rbws-anim-doc-review-pages {
  0%,
  23.333333333333336% {
    transform: translateY(0%);
  }
  33.333333333333336%,
  56.66666666666667% {
    transform: translateY(-100%);
  }
  66.66666666666667%,
  92% {
    transform: translateY(-200%);
  }
  99%,
  100% {
    transform: translateY(-200%);
  }
}
@keyframes rbws-anim-doc-review-thumbs {
  0%,
  23.333333333333336% {
    transform: translateY(0%);
  }
  33.333333333333336%,
  56.66666666666667% {
    transform: translateY(100%);
  }
  66.66666666666667%,
  92% {
    transform: translateY(200%);
  }
  99%,
  100% {
    transform: translateY(200%);
  }
}
@keyframes rbws-anim-doc-review-page-1-slide {
  0%,
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  8%,
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes rbws-anim-doc-review-page-2-slide {
  0%,
  33.333333333333336% {
    transform: translateX(-100%);
    opacity: 0;
  }
  41.333333333333336%,
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes rbws-anim-doc-review-page-3-slide {
  0%,
  66.66666666666667% {
    transform: translateX(-100%);
    opacity: 0;
  }
  74.66666666666667%,
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes rbws-anim-doc-review-page-1-markers {
  0%,
  8% {
    opacity: 0;
    transform: scaleX(0);
  }
  13%,
  100% {
    opacity: 1;
    transform: scaleX(100%);
  }
}
@keyframes rbws-anim-doc-review-page-2-markers {
  0%,
  41.333333333333336% {
    opacity: 0;
    transform: scaleX(0);
  }
  46.333333333333336%,
  100% {
    opacity: 1;
    transform: scaleX(100%);
  }
}
@keyframes rbws-anim-doc-review-page-3-markers {
  0%,
  74.66666666666667% {
    opacity: 0;
    transform: scaleX(0);
  }
  79.66666666666667%,
  100% {
    opacity: 1;
    transform: scaleX(100%);
  }
}
.rbws-page-frontpage #content #doc-review .rbws-c-tour-doc-review.js-is-in-view .rbws-c-tour-doc-review__modified .rbws-c-tour-doc-review__page:nth-child(1) {
  animation: rbws-anim-doc-review-page-1-slide 10s ease-in-out forwards 0.5s;
}
.rbws-page-frontpage #content #doc-review .rbws-c-tour-doc-review.js-is-in-view .rbws-c-tour-doc-review__modified .rbws-c-tour-doc-review__page:nth-child(2) {
  animation: rbws-anim-doc-review-page-2-slide 10s ease-in-out forwards 0.5s;
}
.rbws-page-frontpage #content #doc-review .rbws-c-tour-doc-review.js-is-in-view .rbws-c-tour-doc-review__modified .rbws-c-tour-doc-review__page:nth-child(3) {
  animation: rbws-anim-doc-review-page-3-slide 10s ease-in-out forwards 0.5s;
}
.rbws-page-frontpage #content #doc-review .rbws-c-tour-doc-review.js-is-in-view .rbws-c-tour-doc-review__page:nth-child(1) .rbws-c-tour-doc-review__diff-markers .rbws-c-tour-doc-review__delete-marker,
.rbws-page-frontpage #content #doc-review .rbws-c-tour-doc-review.js-is-in-view .rbws-c-tour-doc-review__page:nth-child(1) .rbws-c-tour-doc-review__diff-markers .rbws-c-tour-doc-review__insert-marker {
  animation: rbws-anim-doc-review-page-1-markers 10s ease-in-out forwards 0.5s;
  opacity: 0;
}
.rbws-page-frontpage #content #doc-review .rbws-c-tour-doc-review.js-is-in-view .rbws-c-tour-doc-review__page:nth-child(2) .rbws-c-tour-doc-review__diff-markers .rbws-c-tour-doc-review__delete-marker,
.rbws-page-frontpage #content #doc-review .rbws-c-tour-doc-review.js-is-in-view .rbws-c-tour-doc-review__page:nth-child(2) .rbws-c-tour-doc-review__diff-markers .rbws-c-tour-doc-review__insert-marker {
  animation: rbws-anim-doc-review-page-2-markers 10s ease-in-out forwards 0.5s;
  opacity: 0;
}
.rbws-page-frontpage #content #doc-review .rbws-c-tour-doc-review.js-is-in-view .rbws-c-tour-doc-review__page:nth-child(3) .rbws-c-tour-doc-review__diff-markers .rbws-c-tour-doc-review__delete-marker,
.rbws-page-frontpage #content #doc-review .rbws-c-tour-doc-review.js-is-in-view .rbws-c-tour-doc-review__page:nth-child(3) .rbws-c-tour-doc-review__diff-markers .rbws-c-tour-doc-review__insert-marker {
  animation: rbws-anim-doc-review-page-3-markers 10s ease-in-out forwards 0.5s;
  opacity: 0;
}
.rbws-page-frontpage #content #doc-review .rbws-c-tour-doc-review.js-is-in-view .rbws-c-tour-doc-review__pages {
  animation: rbws-anim-doc-review-pages 10s ease-in-out forwards 0.5s;
}
.rbws-page-frontpage #content #doc-review .rbws-c-tour-doc-review.js-is-in-view .rbws-c-tour-doc-review__thumb:first-child::before {
  animation: rbws-anim-doc-review-thumbs 10s ease-in-out forwards 0.5s;
}
.rbws-page-frontpage #content #get-started {
  --rbws-tour-section-box-background: #FFF9E3;
  --rbws-tour-section-box-shadow: 0 5px 40px #afac98;
  --rbws-tour-section-box-rotation: 0deg;
}
.rbws-page-frontpage #content #hosting-options .rbws-c-cards {
  max-width: 70em;
}
.rbws-page-frontpage #content #hosting-options .rbws-c-cards__card {
  max-width: 30em;
}
.rbws-page-frontpage #content #hosting-options .rbws-c-cards__card-description p {
  text-align: center;
}
.rbws-page-frontpage #content #hosting-options .rbws-c-cards__card-title {
  display: flex;
  align-items: center;
  align-content: end;
  gap: var(--ink-u-spacing-m);
  justify-content: center;
  text-align: left;
  min-height: 54px;
}
.rbws-page-frontpage #content #hosting-options .rbws-c-cards__card-title img {
  margin-right: var(--ink-u-spacing-s);
  vertical-align: bottom;
}
@media only screen and (max-width: 999px) {
  .rbws-page-frontpage #content #hosting-options .rbws-c-cards {
    grid-template-columns: 1fr;
  }
  .rbws-page-frontpage #content #hosting-options .rbws-c-cards__card:nth-child(2) .rbws-c-cards__card-title {
    text-align: right;
  }
}
@media only screen and (max-width: 449px) {
  .rbws-page-frontpage #content #hosting-options .rbws-c-cards {
    grid-template-columns: 1fr;
  }
  .rbws-page-frontpage #content #hosting-options .rbws-c-cards__card-description p {
    text-align: left;
  }
}
.rbws-page-frontpage #content #review-discussions .rbws-c-tour-review.js-is-in-view {
  /* First, click the Reply button. */
  /* Then show the reply area. */
  /* Show the typing. */
  /* Click the resolve button. */
}
.rbws-page-frontpage #content #review-discussions .rbws-c-tour-review.js-is-in-view #reviews-reply-button {
  animation: rbws-anim-click-button 0.4s 1 linear forwards 1s, rbws-anim-tour-review-hide-opacity 1 0s linear forwards 1.4s;
}
.rbws-page-frontpage #content #review-discussions .rbws-c-tour-review.js-is-in-view #reviews-reply {
  animation: rbws-anim-tour-review-show-opacity 0.4s 1 linear forwards 1.5s;
}
@keyframes rbws-anim-reviews-tour-frontpage-typing {
  0% {
    width: 0;
  }
  100% {
    width: 35ch;
  }
}
.rbws-page-frontpage #content #review-discussions .rbws-c-tour-review.js-is-in-view #reviews-reply .rbws-c-tour-review__comment-reply-text {
  animation: rbws-anim-reviews-tour-frontpage-typing 0.9s 1 linear forwards 2.1s;
  display: inline-block;
  overflow: hidden;
  text-wrap: nowrap;
  width: 0;
}
.rbws-page-frontpage #content #review-discussions .rbws-c-tour-review.js-is-in-view #reviews-fixed-button {
  animation: rbws-anim-click-button 0.4s 1 linear forwards 3.8s;
}
.rbws-page-frontpage #content #review-discussions .rbws-c-tour-review.js-is-in-view .rbws-c-tour-review__comment-issue-bar.-is-default {
  animation: rbws-anim-tour-review-hide-opacity 0.4s 1 linear forwards 4.4s;
}
.rbws-page-frontpage #content #review-discussions .rbws-c-tour-review.js-is-in-view .rbws-c-tour-review__comment-issue-bar:not(.-is-default) {
  animation: rbws-anim-tour-review-show-opacity 0.4s 1 linear forwards 4.4s;
}
.rbws-page-frontpage #content #review-discussions .rbws-c-tour-review.js-is-in-view .rbws-c-tour-review__label-fix-it {
  animation: rbws-anim-tour-review-fixit 0.5s 1 ease-in-out forwards 5.1s;
}
.rbws-page-frontpage #content #review-discussions .rbws-c-tour-review.js-is-in-view .rbws-c-tour-review__label-ship-it {
  animation: rbws-anim-tour-review-shipit 0.4s 1 ease-in-out forwards 5.6s;
}
.rbws-page-frontpage #content #image-review {
  /* Set up the mobile presentation for the image review area. */
}
.rbws-page-frontpage #content #image-review .rbws-c-tour-image-color-diff.js-is-in-view .rbws-c-tour-image-color-diff__merged {
  animation: 0.8s ease-in-out 4.45s forwards rbws-anim-image-color-diff-merged-show;
}
.rbws-page-frontpage #content #image-review .rbws-c-tour-image-color-diff.js-is-in-view .rbws-c-tour-image-color-diff__modified-revision {
  animation: 0.5s ease-in-out 4s forwards rbws-anim-image-color-diff-modified-slide;
}
.rbws-page-frontpage #content #image-review .rbws-c-tour-image-color-diff.js-is-in-view .rbws-c-tour-image-color-diff__orig-revision {
  animation: 0.5s ease-in-out 4s forwards rbws-anim-image-color-diff-original-slide;
}
.rbws-page-frontpage #content #image-review .rbws-c-tour-image-onion-skin-diff.js-is-in-view .rbws-c-tour-image-onion-skin-diff__modified-revision {
  animation: 5s ease-in-out 2.5s 1 forwards rbws-anim-image-onion-skin-diff-modified-revision;
}
.rbws-page-frontpage #content #image-review .rbws-c-tour-image-onion-skin-diff.js-is-in-view .rbws-c-tour-image-onion-skin-diff__slider::after {
  animation: 5s ease-in-out 2.5s 1 forwards rbws-anim-image-onion-skin-diff-slider;
}
.rbws-page-frontpage #content #image-review .rbws-c-tour-image-side-by-side-diff.js-is-in-view .rbws-c-tour-image-side-by-side-diff__modified-revision {
  animation: 0.4s ease-in-out 2s forwards rbws-anim-tour-image-side-by-side-diff-modified-unstack;
}
.rbws-page-frontpage #content #image-review .rbws-c-tour-image-side-by-side-diff.js-is-in-view .rbws-c-tour-image-side-by-side-diff__orig-revision {
  animation: 0.4s ease-in-out 2s forwards rbws-anim-tour-image-side-by-side-diff-original-unstack;
}
.rbws-page-frontpage #content #image-review .rbws-c-tour-image-split-diff.js-is-in-view .rbws-c-tour-image-split-diff__handle {
  animation: rbws-anim-tour-image-split-diff-handle-fade 0.4s 1 ease-in forwards 0.2s, rbws-anim-tour-image-split-diff-handle-x 4s 1 ease-in-out forwards 0.2s;
}
.rbws-page-frontpage #content #image-review .rbws-c-tour-image-split-diff.js-is-in-view .rbws-c-tour-image-split-diff__modified-revision {
  animation: rbws-anim-tour-image-split-diff-split-modified-revision 4s 1 ease-in-out forwards 0.2s;
}
.rbws-page-frontpage #content #image-review .rbws-c-tour-image-split-diff.js-is-in-view .rbws-c-tour-image-split-diff__orig-revision {
  animation: rbws-anim-tour-image-split-diff-split-orig-revision 4s 1 ease-in-out forwards 0.2s;
}
.rbws-page-frontpage #content #image-review .rbws-c-tour__column:first-child {
  flex: 0;
}
@media only screen and (max-width: 799px) {
  .rbws-page-frontpage #content #image-review .rbws-c-tour-image-onion-skin-diff.js-is-in-view .rbws-c-tour-image-onion-skin-diff__modified-revision,
  .rbws-page-frontpage #content #image-review .rbws-c-tour-image-onion-skin-diff.js-is-in-view .rbws-c-tour-image-onion-skin-diff__original-revision,
  .rbws-page-frontpage #content #image-review .rbws-c-tour-image-onion-skin-diff.js-is-in-view .rbws-c-tour-image-onion-skin-diff__slider-handle {
    animation-delay: 0.8s;
  }
  .rbws-page-frontpage #content #image-review .rbws-c-tour-image-side-by-side-diff.js-is-in-view__modified-revision,
  .rbws-page-frontpage #content #image-review .rbws-c-tour-image-side-by-side-diff.js-is-in-view__original-revision {
    animation-delay: 1.6s;
  }
  .rbws-page-frontpage #content #image-review .rbws-c-tour-image-color-diff.js-is-in-view .rbws-c-tour-image-color-diff__merged {
    animation-delay: 1.65s;
  }
  .rbws-page-frontpage #content #image-review .rbws-c-tour-image-color-diff.js-is-in-view .rbws-c-tour-image-color-diff__modified-revision,
  .rbws-page-frontpage #content #image-review .rbws-c-tour-image-color-diff.js-is-in-view .rbws-c-tour-image-color-diff__orig-revision {
    animation-delay: 1.2s;
  }
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-post[aria-hidden="false"] .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-slide-rbt-post-1 {
  0% {
    width: 0;
  }
  100% {
    width: 23ch;
  }
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-post[aria-hidden="false"] .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 2.21s linear forwards 0s;
  visibility: hidden;
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-post[aria-hidden="false"] .rbws-c-terminal__line:nth-child(1) .rbws-c-terminal__input {
  /* Show an animation simulating typing. */
  will-change: width;
  animation: rbws-anim-terminal-slide-rbt-post-1 1.61s steps(23, start) forwards 0.6s;
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-post[aria-hidden="false"] .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;
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-post[aria-hidden="false"] .rbws-c-terminal__line:nth-child(2) {
  /* If it's a typing line... */
  /* Add the animation time to the counter. */
  /* If it's output... */
}
@keyframes rbws-anim-terminal-slide-rbt-post-2 {
  0% {
    width: 0;
  }
  100% {
    width: 13ch;
  }
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-post[aria-hidden="false"] .rbws-c-terminal__line:nth-child(2):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 2.51s, rbws-anim-show-while-animating 1.41s linear forwards 2.51s;
  visibility: hidden;
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-post[aria-hidden="false"] .rbws-c-terminal__line:nth-child(2) .rbws-c-terminal__input {
  /* Show an animation simulating typing. */
  will-change: width;
  animation: rbws-anim-terminal-slide-rbt-post-2 0.91s steps(13, start) forwards 3.01s;
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-post[aria-hidden="false"] .rbws-c-terminal__line:nth-child(2) .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 2.51s;
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-post[aria-hidden="false"] .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 4.92s;
  /* Add the animation time to the counter. */
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-post[aria-hidden="false"] .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 3.92s, rbws-anim-terminal-output-cursor-visibility 1s linear forwards 3.92s;
  margin-right: 1ch;
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-post[aria-hidden="false"] .rbws-c-terminal__line:nth-child(4) {
  /* 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 5.92s;
  /* Add the animation time to the counter. */
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-post[aria-hidden="false"] .rbws-c-terminal__line:nth-child(4):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.92s, rbws-anim-terminal-output-cursor-visibility 1s linear forwards 4.92s;
  margin-right: 1ch;
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-post[aria-hidden="false"] .rbws-c-terminal__line:nth-child(5) {
  /* 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 6.92s;
  /* Add the animation time to the counter. */
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-post[aria-hidden="false"] .rbws-c-terminal__line:nth-child(5):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.92s, rbws-anim-terminal-output-cursor-visibility 1s linear forwards 5.92s;
  margin-right: 1ch;
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-post[aria-hidden="false"] .rbws-c-terminal__line:nth-child(6) {
  /* 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 7.12s;
  /* Add the animation time to the counter. */
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-post[aria-hidden="false"] .rbws-c-terminal__line:nth-child(6):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.92s, rbws-anim-terminal-output-cursor-visibility 0.2s linear forwards 6.92s;
  margin-right: 1ch;
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-post[aria-hidden="false"] .rbws-c-terminal__line:nth-child(7) {
  /* 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 7.12s;
  /* Add the animation time to the counter. */
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-post[aria-hidden="false"] .rbws-c-terminal__line:nth-child(7):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.12s, rbws-anim-terminal-output-cursor-visibility 0s linear forwards 7.12s;
  margin-right: 1ch;
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-post[aria-hidden="false"] .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 7.12s;
  /* Add the animation time to the counter. */
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-post[aria-hidden="false"] .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 7.12s, rbws-anim-terminal-output-cursor-visibility 0s linear forwards 7.12s;
  margin-right: 1ch;
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-post[aria-hidden="false"] .rbws-c-terminal__line:nth-child(9) {
  /* 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 7.12s;
  /* Add the animation time to the counter. */
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-post[aria-hidden="false"] .rbws-c-terminal__line:nth-child(9):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.12s, rbws-anim-terminal-output-cursor-visibility 0s linear forwards 7.12s;
  margin-right: 1ch;
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-post[aria-hidden="false"] .rbws-c-terminal__line:nth-child(10) {
  /* If it's a typing line... */
  /* Add the animation time to the counter. */
  /* If it's output... */
}
@keyframes rbws-anim-terminal-slide-rbt-post-10 {
  0% {
    width: 0;
  }
  100% {
    width: 0ch;
  }
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-post[aria-hidden="false"] .rbws-c-terminal__line:nth-child(10):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 7.12s, rbws-anim-show-while-animating 0s linear forwards 7.12s;
  visibility: hidden;
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-post[aria-hidden="false"] .rbws-c-terminal__line:nth-child(10) .rbws-c-terminal__input {
  /* Show an animation simulating typing. */
  will-change: width;
  animation: rbws-anim-terminal-slide-rbt-post-10 0s steps(0, start) forwards 7.12s;
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-post[aria-hidden="false"] .rbws-c-terminal__line:nth-child(10) .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 7.12s;
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-post[aria-hidden="false"] .rbws-c-terminal__cursor:after {
  animation: rbws-anim-terminal-cursor-blink 0.5s step-start infinite, rbws-anim-terminal-end 7.12s linear forwards 0s;
  visibility: hidden;
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-land[aria-hidden="false"] .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-slide-rbt-land-1 {
  0% {
    width: 0;
  }
  100% {
    width: 17ch;
  }
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-land[aria-hidden="false"] .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.79s linear forwards 0s;
  visibility: hidden;
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-land[aria-hidden="false"] .rbws-c-terminal__line:nth-child(1) .rbws-c-terminal__input {
  /* Show an animation simulating typing. */
  will-change: width;
  animation: rbws-anim-terminal-slide-rbt-land-1 1.19s steps(17, start) forwards 0.6s;
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-land[aria-hidden="false"] .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;
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-land[aria-hidden="false"] .rbws-c-terminal__line:nth-child(2) {
  /* If it's a typing line... */
  /* Add the animation time to the counter. */
  /* If it's output... */
}
@keyframes rbws-anim-terminal-slide-rbt-land-2 {
  0% {
    width: 0;
  }
  100% {
    width: 26ch;
  }
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-land[aria-hidden="false"] .rbws-c-terminal__line:nth-child(2):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 2.09s, rbws-anim-show-while-animating 2.32s linear forwards 2.09s;
  visibility: hidden;
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-land[aria-hidden="false"] .rbws-c-terminal__line:nth-child(2) .rbws-c-terminal__input {
  /* Show an animation simulating typing. */
  will-change: width;
  animation: rbws-anim-terminal-slide-rbt-land-2 1.82s steps(26, start) forwards 2.59s;
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-land[aria-hidden="false"] .rbws-c-terminal__line:nth-child(2) .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 2.09s;
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-land[aria-hidden="false"] .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 5.41s;
  /* Add the animation time to the counter. */
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-land[aria-hidden="false"] .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 4.41s, rbws-anim-terminal-output-cursor-visibility 1s linear forwards 4.41s;
  margin-right: 1ch;
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-land[aria-hidden="false"] .rbws-c-terminal__line:nth-child(4) {
  /* 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 6.41s;
  /* Add the animation time to the counter. */
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-land[aria-hidden="false"] .rbws-c-terminal__line:nth-child(4):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.41s, rbws-anim-terminal-output-cursor-visibility 1s linear forwards 5.41s;
  margin-right: 1ch;
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-land[aria-hidden="false"] .rbws-c-terminal__line:nth-child(5) {
  /* 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 6.41s;
  /* Add the animation time to the counter. */
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-land[aria-hidden="false"] .rbws-c-terminal__line:nth-child(5):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.41s, rbws-anim-terminal-output-cursor-visibility 0s linear forwards 6.41s;
  margin-right: 1ch;
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-land[aria-hidden="false"] .rbws-c-terminal__line:nth-child(6) {
  /* 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 6.41s;
  /* Add the animation time to the counter. */
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-land[aria-hidden="false"] .rbws-c-terminal__line:nth-child(6):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.41s, rbws-anim-terminal-output-cursor-visibility 0s linear forwards 6.41s;
  margin-right: 1ch;
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-land[aria-hidden="false"] .rbws-c-terminal__line:nth-child(7) {
  /* If it's a typing line... */
  /* Add the animation time to the counter. */
  /* If it's output... */
}
@keyframes rbws-anim-terminal-slide-rbt-land-7 {
  0% {
    width: 0;
  }
  100% {
    width: 0ch;
  }
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-land[aria-hidden="false"] .rbws-c-terminal__line:nth-child(7):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 7.41s, rbws-anim-show-while-animating 0s linear forwards 7.41s;
  visibility: hidden;
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-land[aria-hidden="false"] .rbws-c-terminal__line:nth-child(7) .rbws-c-terminal__input {
  /* Show an animation simulating typing. */
  will-change: width;
  animation: rbws-anim-terminal-slide-rbt-land-7 0s steps(0, start) forwards 7.41s;
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-land[aria-hidden="false"] .rbws-c-terminal__line:nth-child(7) .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 7.41s;
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-land[aria-hidden="false"] .rbws-c-terminal__cursor:after {
  animation: rbws-anim-terminal-cursor-blink 0.5s step-start infinite, rbws-anim-terminal-end 7.41s linear forwards 0s;
  visibility: hidden;
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-alias[aria-hidden="false"] .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-slide-rbt-alias-1 {
  0% {
    width: 0;
  }
  100% {
    width: 20ch;
  }
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-alias[aria-hidden="false"] .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 2s linear forwards 0s;
  visibility: hidden;
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-alias[aria-hidden="false"] .rbws-c-terminal__line:nth-child(1) .rbws-c-terminal__input {
  /* Show an animation simulating typing. */
  will-change: width;
  animation: rbws-anim-terminal-slide-rbt-alias-1 1.4s steps(20, start) forwards 0.6s;
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-alias[aria-hidden="false"] .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;
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-alias[aria-hidden="false"] .rbws-c-terminal__line:nth-child(2) {
  /* 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 2s;
  /* Add the animation time to the counter. */
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-alias[aria-hidden="false"] .rbws-c-terminal__line: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 2s, rbws-anim-terminal-output-cursor-visibility 0s linear forwards 2s;
  margin-right: 1ch;
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-alias[aria-hidden="false"] .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 2s;
  /* Add the animation time to the counter. */
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-alias[aria-hidden="false"] .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 2s, rbws-anim-terminal-output-cursor-visibility 0s linear forwards 2s;
  margin-right: 1ch;
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-alias[aria-hidden="false"] .rbws-c-terminal__line:nth-child(4) {
  /* 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 2s;
  /* Add the animation time to the counter. */
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-alias[aria-hidden="false"] .rbws-c-terminal__line:nth-child(4):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 2s, rbws-anim-terminal-output-cursor-visibility 0s linear forwards 2s;
  margin-right: 1ch;
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-alias[aria-hidden="false"] .rbws-c-terminal__line:nth-child(5) {
  /* 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 2s;
  /* Add the animation time to the counter. */
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-alias[aria-hidden="false"] .rbws-c-terminal__line:nth-child(5):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 2s, rbws-anim-terminal-output-cursor-visibility 0s linear forwards 2s;
  margin-right: 1ch;
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-alias[aria-hidden="false"] .rbws-c-terminal__line:nth-child(6) {
  /* 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 2s;
  /* Add the animation time to the counter. */
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-alias[aria-hidden="false"] .rbws-c-terminal__line:nth-child(6):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 2s, rbws-anim-terminal-output-cursor-visibility 0s linear forwards 2s;
  margin-right: 1ch;
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-alias[aria-hidden="false"] .rbws-c-terminal__line:nth-child(7) {
  /* 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 2s;
  /* Add the animation time to the counter. */
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-alias[aria-hidden="false"] .rbws-c-terminal__line:nth-child(7):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 2s, rbws-anim-terminal-output-cursor-visibility 0s linear forwards 2s;
  margin-right: 1ch;
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-alias[aria-hidden="false"] .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 2s;
  /* Add the animation time to the counter. */
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-alias[aria-hidden="false"] .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 2s, rbws-anim-terminal-output-cursor-visibility 0s linear forwards 2s;
  margin-right: 1ch;
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-alias[aria-hidden="false"] .rbws-c-terminal__line:nth-child(9) {
  /* If it's a typing line... */
  /* Add the animation time to the counter. */
  /* If it's output... */
}
@keyframes rbws-anim-terminal-slide-rbt-alias-9 {
  0% {
    width: 0;
  }
  100% {
    width: 18ch;
  }
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-alias[aria-hidden="false"] .rbws-c-terminal__line:nth-child(9):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 2s, rbws-anim-show-while-animating 1.76s linear forwards 2s;
  visibility: hidden;
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-alias[aria-hidden="false"] .rbws-c-terminal__line:nth-child(9) .rbws-c-terminal__input {
  /* Show an animation simulating typing. */
  will-change: width;
  animation: rbws-anim-terminal-slide-rbt-alias-9 1.26s steps(18, start) forwards 2.5s;
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-alias[aria-hidden="false"] .rbws-c-terminal__line:nth-child(9) .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 2s;
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-alias[aria-hidden="false"] .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 4.76s;
  /* Add the animation time to the counter. */
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-alias[aria-hidden="false"] .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 3.76s, rbws-anim-terminal-output-cursor-visibility 1s linear forwards 3.76s;
  margin-right: 1ch;
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-alias[aria-hidden="false"] .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 6.76s;
  /* Add the animation time to the counter. */
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-alias[aria-hidden="false"] .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 4.76s, rbws-anim-terminal-output-cursor-visibility 2s linear forwards 4.76s;
  margin-right: 1ch;
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-alias[aria-hidden="false"] .rbws-c-terminal__line:nth-child(12) {
  /* If it's a typing line... */
  /* Add the animation time to the counter. */
  /* If it's output... */
}
@keyframes rbws-anim-terminal-slide-rbt-alias-12 {
  0% {
    width: 0;
  }
  100% {
    width: 0ch;
  }
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-alias[aria-hidden="false"] .rbws-c-terminal__line:nth-child(12):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 7.26s, rbws-anim-show-while-animating 0s linear forwards 7.26s;
  visibility: hidden;
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-alias[aria-hidden="false"] .rbws-c-terminal__line:nth-child(12) .rbws-c-terminal__input {
  /* Show an animation simulating typing. */
  will-change: width;
  animation: rbws-anim-terminal-slide-rbt-alias-12 0s steps(0, start) forwards 7.26s;
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-alias[aria-hidden="false"] .rbws-c-terminal__line:nth-child(12) .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 7.26s;
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-alias[aria-hidden="false"] .rbws-c-terminal__cursor:after {
  animation: rbws-anim-terminal-cursor-blink 0.5s step-start infinite, rbws-anim-terminal-end 7.26s linear forwards 0s;
  visibility: hidden;
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-status[aria-hidden="false"] .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-slide-rbt-status-1 {
  0% {
    width: 0;
  }
  100% {
    width: 10ch;
  }
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-status[aria-hidden="false"] .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.3s linear forwards 0s;
  visibility: hidden;
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-status[aria-hidden="false"] .rbws-c-terminal__line:nth-child(1) .rbws-c-terminal__input {
  /* Show an animation simulating typing. */
  will-change: width;
  animation: rbws-anim-terminal-slide-rbt-status-1 0.7s steps(10, start) forwards 0.6s;
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-status[aria-hidden="false"] .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;
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-status[aria-hidden="false"] .rbws-c-terminal__line:nth-child(2) {
  /* 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 2.3s;
  /* Add the animation time to the counter. */
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-status[aria-hidden="false"] .rbws-c-terminal__line: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.3s, rbws-anim-terminal-output-cursor-visibility 1s linear forwards 1.3s;
  margin-right: 1ch;
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-status[aria-hidden="false"] .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 2.3s;
  /* Add the animation time to the counter. */
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-status[aria-hidden="false"] .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.3s, rbws-anim-terminal-output-cursor-visibility 0s linear forwards 2.3s;
  margin-right: 1ch;
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-status[aria-hidden="false"] .rbws-c-terminal__line:nth-child(4) {
  /* 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 2.3s;
  /* Add the animation time to the counter. */
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-status[aria-hidden="false"] .rbws-c-terminal__line:nth-child(4):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.3s, rbws-anim-terminal-output-cursor-visibility 0s linear forwards 2.3s;
  margin-right: 1ch;
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-status[aria-hidden="false"] .rbws-c-terminal__line:nth-child(5) {
  /* 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 2.3s;
  /* Add the animation time to the counter. */
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-status[aria-hidden="false"] .rbws-c-terminal__line:nth-child(5):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.3s, rbws-anim-terminal-output-cursor-visibility 0s linear forwards 2.3s;
  margin-right: 1ch;
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-status[aria-hidden="false"] .rbws-c-terminal__line:nth-child(6) {
  /* 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 2.3s;
  /* Add the animation time to the counter. */
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-status[aria-hidden="false"] .rbws-c-terminal__line:nth-child(6):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.3s, rbws-anim-terminal-output-cursor-visibility 0s linear forwards 2.3s;
  margin-right: 1ch;
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-status[aria-hidden="false"] .rbws-c-terminal__line:nth-child(7) {
  /* 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 2.3s;
  /* Add the animation time to the counter. */
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-status[aria-hidden="false"] .rbws-c-terminal__line:nth-child(7):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.3s, rbws-anim-terminal-output-cursor-visibility 0s linear forwards 2.3s;
  margin-right: 1ch;
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-status[aria-hidden="false"] .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 2.3s;
  /* Add the animation time to the counter. */
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-status[aria-hidden="false"] .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 2.3s, rbws-anim-terminal-output-cursor-visibility 0s linear forwards 2.3s;
  margin-right: 1ch;
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-status[aria-hidden="false"] .rbws-c-terminal__line:nth-child(9) {
  /* If it's a typing line... */
  /* Add the animation time to the counter. */
  /* If it's output... */
}
@keyframes rbws-anim-terminal-slide-rbt-status-9 {
  0% {
    width: 0;
  }
  100% {
    width: 0ch;
  }
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-status[aria-hidden="false"] .rbws-c-terminal__line:nth-child(9):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 2.3s, rbws-anim-show-while-animating 0s linear forwards 2.3s;
  visibility: hidden;
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-status[aria-hidden="false"] .rbws-c-terminal__line:nth-child(9) .rbws-c-terminal__input {
  /* Show an animation simulating typing. */
  will-change: width;
  animation: rbws-anim-terminal-slide-rbt-status-9 0s steps(0, start) forwards 2.3s;
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-status[aria-hidden="false"] .rbws-c-terminal__line:nth-child(9) .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 2.3s;
}
.rbws-page-frontpage #content #terminals-slideshow.js-is-in-view #slide-rbt-status[aria-hidden="false"] .rbws-c-terminal__cursor:after {
  animation: rbws-anim-terminal-cursor-blink 0.5s step-start infinite, rbws-anim-terminal-end 2.3s linear forwards 0s;
  visibility: hidden;
}
.rbws-page-frontpage #content #terminals-slideshow .rbws-c-terminal .rbws-c-terminal__line:first-child:after {
  content: "_";
  display: inline;
  animation: rbws-anim-terminal-cursor-blink 0.5s step-start infinite;
}
.rbws-page-frontpage #content #trusted-by {
  max-width: 80em;
}
.rbws-page-frontpage #content #trusted-by .rbws-c-tour-trusted-by__user {
  display: inline-block;
  margin: 1em 0.8em;
  vertical-align: middle;
}
/*# sourceMappingURL=frontpage.css.map */