/* ==================================================================
   The release page as a launch showcase (DOCS-216).

   release-showcase.js builds the tour, the spreads and the chapter bar from
   the page's own Markdown; this file styles them. Two layers:

   - The frame: no sidebar, a wide column and a full-bleed banner. Keyed on
     the banner itself with :has(), so it holds before the script has run
     and without it. The script's work then fills a layout that is already
     the right shape, rather than rebuilding the page from under the reader.
   - The showcase: everything the script adds, keyed on .rs-showcase, which
     the script sets once the parts exist.

   Screen only. Print gets the ordinary document, highlight cards and all.
   ================================================================== */

@media screen {

  /* ---------------------------------------------------------------- frame */

  /* The sidebar goes because the page is a launch piece, not a chapter of a
     guide. Hidden only where Material docks it: below 76.25em it is the
     drawer, and the drawer is how a phone reaches the rest of the site. */
  @media (min-width: 76.25em) {
    .md-main__inner:has(.rs-release) > .md-sidebar--primary {
      display: none;
    }
  }

  /* overflow-x: clip, not hidden. hidden would make .md-main a scroll
     container, and the spreads' pinned text is position: sticky. */
  .md-main:has(.rs-release) {
    overflow-x: clip;
  }
  /* the banner meets the header, with no strip of page between */
  .md-main:has(.rs-release) > .md-main__inner {
    margin-top: 0;
  }
  .md-content__inner:has(> .rs-release)::before {
    display: none;
  }

  /* The landing pages' 62rem, centred. Material's docked-sidebar rule sets a
     left margin at a specificity the [dir] prefix is here to match. */
  [dir] .md-main__inner > .md-content > .md-content__inner:has(> .rs-release) {
    position: relative;
    max-width: 62rem;
    margin-left: auto;
    margin-right: auto;
    padding-top: 0;
    /* The distance from the column's content edge to the viewport's. Resolved
       where it is used, so a percentage in it is always the column's width.
       --rs-sbw is the classic scrollbar's width, which 100vw includes and
       the column does not; the script measures it. */
    --rs-bleed: calc(50vw - 50% - var(--rs-sbw, 0px) / 2);
  }

  /* Until the script has made spreads of them, the sections keep the reading
     measure. */
  .md-typeset.md-content__inner:has(> .rs-release):not(.rs-showcase) > :not(.rs-release, .md-content__button) {
    max-width: 46rem;
    margin-left: auto;
    margin-right: auto;
  }

  .md-typeset.md-content__inner:has(> .rs-release) > .rs-release {
    --rs-release-bevel: 2.4rem;
    margin: 0 calc(-1 * var(--rs-bleed)) 0;
    padding: 3rem var(--rs-bleed) 3rem;
  }
  .md-typeset.md-content__inner:has(> .rs-release) > .rs-release .rs-release__mark {
    right: -1.2rem;
    bottom: -3rem;
    font-size: 16rem;
  }

  /* The Copy as Markdown button, over the banner's top right. Absolute, not
     floated: the showcase banner is a grid, and a grid is a new block
     formatting context, which would narrow itself round a float. */
  .md-content__inner:has(> .rs-release) > .md-content__button.rs-copy-markdown {
    position: absolute;
    top: 0.9rem;
    right: 1.6rem;
    float: none;
    margin: 0;
  }

  /* ------------------------------------------------------------ the hero */

  .md-typeset.md-content__inner.rs-showcase > .rs-release {
    display: grid;
    grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr);
    grid-template-areas:
      "kicker kicker"
      "title  title"
      "copy   stage"
      "tabs   tabs";
    column-gap: 3.2rem;
    align-items: start;
    padding-top: 2rem;
    padding-bottom: 0;
    background:
      radial-gradient(circle at 78% 38%, rgba(49, 162, 217, 0.34) 0%, transparent 42%),
      radial-gradient(circle at 0% 100%, rgba(49, 162, 217, 0.16) 0%, transparent 40%),
      linear-gradient(135deg, var(--rs-navy-deep) 0%, var(--rs-navy) 72%);
  }
  .md-content__inner.rs-showcase .rs-release > .rs-release__kicker {
    grid-area: kicker;
  }
  .md-typeset.md-content__inner.rs-showcase .rs-release h1 {
    grid-area: title;
    max-width: none;
    font-size: 2.55rem;
    letter-spacing: -0.01em;
    margin-bottom: 1.3rem;
  }
  .md-content__inner.rs-showcase .rs-release__copy {
    grid-area: copy;
  }
  .md-typeset.md-content__inner.rs-showcase .rs-release .rs-release__nav {
    margin-top: 1.7rem;
  }
  .md-typeset.md-content__inner.rs-showcase .rs-release .rs-release__mark {
    top: -2.2rem;
    bottom: auto;
    right: -2.4rem;
    font-size: 20rem;
    color: rgba(255, 255, 255, 0.05);
  }

  /* ------------------------------------------------------------ the stage */

  .md-typeset .rs-tour__stage {
    grid-area: stage;
    position: relative;
    margin: 0;
  }
  /* a pool of light under the frame */
  .md-typeset .rs-tour__stage::before {
    content: "";
    position: absolute;
    inset: -14% -10% -4% -12%;
    z-index: -1;
    background: radial-gradient(closest-side, rgba(49, 162, 217, 0.42), rgba(49, 162, 217, 0));
    pointer-events: none;
  }

  .md-typeset .rs-tour__frame {
    position: relative;
    background: #fff;
    box-shadow: 0 2.2rem 4.4rem rgba(4, 10, 19, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.18);
  }
  /* a second screen behind the first */
  .md-typeset .rs-tour__frame::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    transform: translate(0.9rem, 0.9rem);
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.04);
  }

  .md-typeset .rs-tour__chrome {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    height: 1.75rem;
    padding: 0 0.3rem 0 0.7rem;
    background: #e9eef3;
    border-bottom: 1px solid #d5dde6;
  }
  .md-typeset .rs-tour__dots {
    display: flex;
    gap: 0.28rem;
  }
  .md-typeset .rs-tour__dots i {
    width: 0.45rem;
    height: 0.45rem;
    background: #c3ccd6;
  }
  .md-typeset .rs-tour__where {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 0.54rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #5b6b7c;
  }
  .md-typeset .rs-tour__toggle {
    margin-left: auto;
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.28rem 0.6rem;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-family: var(--rs-body-font);
    font-size: 0.52rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--rs-navy);
    transition: background-color 0.18s ease, color 0.18s ease;
  }
  /* pause bars, or a play triangle once the tour has stopped */
  .md-typeset .rs-tour__toggle::before {
    content: "";
    width: 0.42rem;
    height: 0.5rem;
    background: linear-gradient(90deg, currentColor 0 35%, transparent 35% 65%, currentColor 65%);
  }
  .md-typeset .rs-release.is-stopped .rs-tour__toggle::before {
    background: currentColor;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
  }
  .md-typeset .rs-tour__toggle:hover,
  .md-typeset .rs-tour__toggle:focus-visible {
    background: var(--rs-blue);
    color: #fff;
  }

  /* The screenshot, on the same tinted plate as the spreads below. The script
     lays it out at actual size and zooms it there from whole over the slide,
     by transform from the top left; hidden until the script shows it. */
  .md-typeset .rs-tour__view {
    position: relative;
    aspect-ratio: 16 / 9.5;
    overflow: hidden;
    background: linear-gradient(150deg, #eef3f8 0%, #dce6f0 100%);
  }
  .md-typeset img.rs-tour__shot {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    max-width: none;
    margin: 0;
    border: 1px solid #d3dce6;
    background: #fff;
    box-shadow: 0 0.5rem 1.4rem rgba(29, 39, 51, 0.16);
    opacity: 0;
    transform-origin: 0 0;
  }

  /* the whole plate is the button that opens the screenshot full size */
  .md-typeset .rs-tour__zoom {
    position: absolute;
    inset: 0;
    z-index: 1;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: zoom-in;
  }
  .md-typeset .rs-tour__zoom:focus-visible {
    outline: 2px solid var(--rs-blue);
    outline-offset: -2px;
  }
  .md-typeset .rs-tour__zoom-label {
    position: absolute;
    right: 0.6rem;
    bottom: 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.32rem 0.6rem;
    background: rgba(38, 54, 74, 0.82);
    color: #fff;
    font-family: var(--rs-body-font);
    font-size: 0.52rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition: background-color 0.18s ease;
  }
  .md-typeset .rs-tour__zoom-label svg {
    width: 0.85rem;
    height: 0.85rem;
    fill: currentColor;
  }
  .md-typeset .rs-tour__zoom:hover .rs-tour__zoom-label,
  .md-typeset .rs-tour__zoom:focus-visible .rs-tour__zoom-label {
    background: var(--rs-blue);
  }
  /* Positioned so it paints above the frame, which is positioned too: the
     frame's drop shadow falls across the caption and greyed it out. */
  .md-typeset .rs-release .rs-tour__caption {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.45rem;
    min-height: 5rem;
    max-width: none;
    margin: 1rem 0 0;
    text-align: left;
    font-style: normal;
  }
  .md-typeset .rs-release a.rs-tour__title {
    display: inline-flex;
    align-items: baseline;
    gap: 0.55rem;
    font-family: var(--rs-display-font);
    font-weight: 700;
    font-size: 1.45rem;
    line-height: 1.2;
    color: #fff;
    border-bottom: none;
  }
  .md-typeset .rs-release a.rs-tour__title::after {
    content: "\2192";
    font-family: var(--rs-body-font);
    font-size: 1.05rem;
    color: var(--rs-blue);
    transition: transform 0.18s ease;
  }
  .md-typeset .rs-release a.rs-tour__title:hover,
  .md-typeset .rs-release a.rs-tour__title:focus-visible {
    color: var(--rs-blue);
  }
  .md-typeset .rs-release a.rs-tour__title:hover::after {
    transform: translateX(4px);
  }
  .md-typeset .rs-tour__blurb {
    font-size: 0.8rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.78);
  }

  /* -------------------------------------------------------------- the tabs */

  .md-typeset .rs-tour__tabs {
    grid-area: tabs;
    display: grid;
    grid-template-columns: repeat(var(--rs-tour-count, 9), minmax(0, 1fr));
    margin-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
  }
  .md-typeset .rs-tour__tab {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.55rem;
    min-width: 0;
    margin: 0;
    padding: 1.05rem 0.75rem 1.3rem;
    border: 0;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font-family: var(--rs-body-font);
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.6);
    transition: color 0.2s ease, background-color 0.2s ease;
  }
  .md-typeset .rs-tour__tab:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.04);
  }
  .md-typeset .rs-tour__tab:focus-visible {
    outline: 2px solid var(--rs-blue);
    outline-offset: -2px;
  }
  .md-typeset .rs-tour__tab[aria-selected="true"] {
    color: #fff;
    background: rgba(255, 255, 255, 0.07);
  }
  .md-typeset .rs-tour__icon {
    display: flex;
  }
  .md-typeset .rs-tour__icon svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: currentColor;
    transition: fill 0.2s ease;
  }
  .md-typeset .rs-tour__tab[aria-selected="true"] .rs-tour__icon svg {
    fill: var(--rs-blue);
  }

  /* the dwell bar: fills while the tour runs, holds full once it stops */
  .md-typeset .rs-tour__progress {
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;
    height: 3px;
  }
  .md-typeset .rs-tour__progress::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--rs-blue);
    transform: scaleX(0);
    transform-origin: left;
  }
  .md-typeset .rs-tour__tab[aria-selected="true"] .rs-tour__progress::after {
    transform: scaleX(1);
  }
  .md-typeset .rs-tour__tab.is-running .rs-tour__progress::after {
    animation: rs-tour-dwell var(--rs-tour-dwell, 5s) linear both;
  }
  /* Held while it is out of sight, and while the reader is on the caption or
     the tabs. Not the play button: pressing Play has to start the tour while
     the pointer and the focus are still on it. Keyboard focus only, as a
     mouse click leaves focus behind on whatever it pressed. */
  .md-typeset .rs-release.is-held .rs-tour__progress::after,
  .md-typeset .rs-tour__stage:has(.rs-tour__caption:hover, .rs-tour__zoom:hover) ~ .rs-tour__tabs .rs-tour__progress::after,
  .md-typeset .rs-tour__stage:has(.rs-tour__caption :focus-visible) ~ .rs-tour__tabs .rs-tour__progress::after,
  .md-typeset .rs-tour__tabs:hover .rs-tour__progress::after,
  .md-typeset .rs-tour__tabs:has(:focus-visible) .rs-tour__progress::after {
    animation-play-state: paused;
  }

  /* ------------------------------------------------------- the chapter bar */

  .rs-chapterbar {
    position: fixed;
    z-index: 3;
    top: var(--rs-header-h, 2.4rem);
    display: flex;
    align-items: center;
    height: 2.3rem;
    padding: 0 0.5rem;
    background: rgba(38, 54, 74, 0.97);
    box-shadow: 0 0.5rem 1.2rem rgba(20, 30, 45, 0.2);
    transform: translateY(-130%);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.25s ease, visibility 0s linear 0.35s;
  }
  .rs-chapterbar.is-on {
    transform: none;
    opacity: 1;
    visibility: visible;
    transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.25s ease;
  }
  .md-typeset .rs-chapterbar a {
    border-bottom: none;
    text-decoration: none;
  }
  .md-typeset .rs-chapterbar__mark {
    flex: none;
    margin: 0 0.7rem 0 0.35rem;
    font-family: var(--rs-display-font);
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--rs-blue);
  }
  .md-typeset .rs-chapterbar__mark:hover {
    color: #fff;
  }
  .md-typeset .rs-chapterbar__links {
    display: flex;
    gap: 0.2rem;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .md-typeset .rs-chapterbar__links::-webkit-scrollbar {
    display: none;
  }
  .md-typeset .rs-chapterbar__links a {
    flex: none;
    padding: 0.34rem 0.65rem;
    font-family: var(--rs-body-font);
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.72);
    transition: background-color 0.2s ease, color 0.2s ease;
  }
  .md-typeset .rs-chapterbar__links a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
  }
  .md-typeset .rs-chapterbar__links a:focus-visible {
    outline: 2px solid var(--rs-blue);
    outline-offset: -2px;
  }
  .md-typeset .rs-chapterbar__links a[aria-current] {
    color: #fff;
    background: var(--rs-blue);
  }
  .rs-chapterbar__progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--rs-blue);
    transform: scaleX(0);
    transform-origin: left;
  }

  /* Material's Back to top button drops in where the bar sits. Material
     writes its top inline from the header's height, hence !important. */
  .md-container:has(.rs-showcase) .md-top {
    top: 5.7rem !important;
  }

  /* Anchors land clear of the header and the bar. */
  .md-content__inner.rs-showcase :is(h2, h3)[id] {
    scroll-margin-top: calc(var(--rs-header-h, 2.4rem) + 3.4rem);
  }

  /* ------------------------------------------------- the rest of the page */

  .md-content__inner.rs-showcase > #highlights,
  .md-content__inner.rs-showcase > .rs-cards {
    display: none;
  }

  /* the pull-quote as the page's opening statement */
  .md-typeset.md-content__inner.rs-showcase > .rs-pullquote {
    max-width: 44rem;
    margin: 4.4rem auto 1rem;
    padding: 0;
    border: 0;
    background: none;
    text-align: center;
  }
  .md-typeset.md-content__inner.rs-showcase > .rs-pullquote p {
    font-size: 1.5rem;
    line-height: 1.38;
  }
  .md-typeset.md-content__inner.rs-showcase > .rs-pullquote .rs-pullquote__label {
    font-size: 0.64rem;
    margin-bottom: 0.9rem;
  }
  .md-typeset.md-content__inner.rs-showcase > .rs-pullquote .rs-pullquote__label::after {
    content: "";
    display: block;
    width: 2.4rem;
    height: 3px;
    margin: 0.9rem auto 0;
    background: var(--rs-blue);
  }

  /* chapters: a large outlined number, and the chapter's sections under the title */
  .md-typeset.md-content__inner.rs-showcase h2.rs-chapter {
    font-size: 2.6rem;
    line-height: 1.1;
    margin: 6rem 0 0.9rem;
    padding: 3.2rem 7rem 0 0;
  }
  .md-typeset.md-content__inner.rs-showcase h2.rs-chapter::before {
    left: auto;
    right: 0;
    top: 2.4rem;
    font-family: var(--rs-display-font);
    font-weight: 700;
    font-size: 5.2rem;
    line-height: 1;
    letter-spacing: -0.02em;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(49, 162, 217, 0.55);
  }
  .md-typeset.md-content__inner.rs-showcase h2.rs-chapter::after {
    content: "";
    position: absolute;
    left: 0;
    top: -1px;
    width: 4rem;
    height: 3px;
    background: var(--rs-blue);
  }

  /* ul.class and [dir] match Material's list rules, which carry :not([hidden]) and [dir=ltr] */
  .md-typeset ul.rs-chapter-toc {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
  }
  [dir] .md-typeset ul.rs-chapter-toc > li {
    margin: 0;
    list-style: none;
    font-size: 0.72rem;
    color: #8a96a3;
  }
  .md-typeset .rs-chapter-toc li + li::before {
    content: "/";
    margin: 0 0.55rem;
    color: #c3ccd6;
  }
  .md-typeset .rs-chapter-toc a {
    color: var(--rs-grey);
    border-bottom: none;
  }
  .md-typeset .rs-chapter-toc a:hover {
    color: var(--rs-blue);
  }

  /* the spreads: text pinned beside its screenshot, alternating sides */
  .md-typeset .rs-spread {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    column-gap: 3.4rem;
    align-items: start;
    margin: 3.4rem 0;
  }
  .md-typeset .rs-spread--flip {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  }
  .md-typeset .rs-spread--flip > .rs-spread__text {
    order: 2;
  }
  .md-typeset .rs-spread--text {
    display: block;
    max-width: 44rem;
  }
  .md-typeset .rs-feature + .rs-feature > .rs-spread:first-child {
    margin-top: 4.6rem;
  }
  .md-typeset .rs-spread__text {
    position: sticky;
    top: calc(var(--rs-header-h, 2.4rem) + 3.6rem);
    padding-top: 0.4rem;
  }
  .md-typeset .rs-spread--text > .rs-spread__text {
    position: static;
  }
  .md-typeset .rs-spread__text > :last-child {
    margin-bottom: 0;
  }
  .md-typeset.md-content__inner.rs-showcase .rs-spread__text > h3 {
    position: relative;
    font-family: var(--rs-display-font);
    font-size: 1.55rem;
    line-height: 1.18;
    margin: 0 0 0.9rem;
    padding-top: 1rem;
  }
  .md-typeset.md-content__inner.rs-showcase .rs-spread__text > h3::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 2.4rem;
    height: 3px;
    background: var(--rs-blue);
  }

  /* screenshots sit on a tinted plate */
  .md-typeset .rs-spread__media {
    padding: 2rem;
    background: linear-gradient(150deg, #eef3f8 0%, #e2ebf4 100%);
  }
  .md-typeset .rs-spread__media > p {
    margin: 0;
  }
  .md-typeset .rs-spread__media > p + p {
    margin-top: 1.2rem;
  }
  .md-typeset .rs-spread__media img {
    margin: 0 auto;
    background: #fff;
  }
  .md-typeset .rs-spread__media .rs-duo {
    grid-template-columns: 2fr 3fr;
  }

  /* Dark Mode goes dark */
  .md-typeset .rs-feature--dark {
    margin: 4.6rem calc(-1 * var(--rs-bleed));
    padding: 1.4rem var(--rs-bleed);
    background:
      radial-gradient(circle at 80% 20%, rgba(49, 162, 217, 0.16) 0%, transparent 45%),
      #0d151f;
    color: #cfd9e4;
  }
  .md-typeset.md-content__inner.rs-showcase .rs-feature--dark h3 {
    color: #fff;
  }
  .md-typeset .rs-feature--dark h3 .twemoji svg {
    fill: #ffd54a;
  }
  .md-typeset .rs-feature--dark .rs-spread__text > p {
    font-family: var(--rs-display-font);
    font-size: 2rem;
    line-height: 1.2;
    color: #fff;
  }
  /* the one screenshot on the page that has to show a whole screen */
  .md-typeset .rs-feature--dark .rs-spread {
    grid-template-columns: minmax(0, 0.5fr) minmax(0, 1.5fr);
  }
  .md-typeset .rs-feature--dark .rs-spread--flip {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.5fr);
  }
  .md-typeset .rs-feature--dark .rs-spread__media {
    padding: 1.4rem;
    background: linear-gradient(150deg, #17222f 0%, #111a25 100%);
  }
  .md-typeset .rs-feature--dark .rs-spread__media img {
    border-color: #26323f;
    box-shadow: 0 1.4rem 3rem rgba(0, 0, 0, 0.5);
  }
  .md-typeset .rs-feature--dark + .rs-feature > .rs-spread:first-child {
    margin-top: 3.4rem;
  }

  /* a chapter of short notes becomes a row of cards */
  .md-typeset .rs-notes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: 1rem;
    margin: 2rem 0;
  }
  .md-typeset .rs-note {
    padding: 1.2rem 1.3rem 1.3rem;
    border: 1px solid var(--rs-rule);
    border-top: 3px solid var(--rs-blue);
    background: #fff;
  }
  .md-typeset.md-content__inner.rs-showcase .rs-note > h3 {
    margin: 0 0 0.6rem;
    font-size: 1rem;
  }
  .md-typeset .rs-note > :last-child {
    margin-bottom: 0;
  }

  /* prior versions as tiles */
  .md-typeset.md-content__inner.rs-showcase > h2#PriorVersions ~ p {
    max-width: 44rem;
  }
  .md-typeset ul.rs-versions {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr));
    gap: 0.7rem;
    margin: 1.4rem 0 0;
    padding: 0;
    list-style: none;
  }
  [dir] .md-typeset ul.rs-versions > li {
    margin: 0;
    list-style: none;
  }
  .md-typeset ul.rs-versions a {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    height: 100%;
    box-sizing: border-box;
    padding: 0.9rem 1rem 1rem;
    border: 1px solid var(--rs-rule);
    color: var(--rs-navy);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
  }
  .md-typeset ul.rs-versions a:hover {
    border-color: var(--rs-blue);
    box-shadow: 0 6px 20px rgba(51, 70, 89, 0.11);
    transform: translateY(-2px);
  }
  .md-typeset .rs-versions__num {
    font-family: var(--rs-display-font);
    font-weight: 700;
    font-size: 1.7rem;
    line-height: 1;
    color: var(--rs-navy);
  }
  .md-typeset .rs-versions__notice .rs-versions__num {
    font-family: var(--rs-body-font);
    font-size: 0.56rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--rs-blue);
    line-height: 1.4;
  }
  .md-typeset .rs-versions__label {
    font-size: 0.66rem;
    line-height: 1.4;
    color: var(--rs-grey);
  }
  .md-typeset ul.rs-versions a:hover .rs-versions__label {
    color: var(--rs-blue);
  }

  /* ------------------------------------------------------------- entrance */

  @media (prefers-reduced-motion: no-preference) {
    .md-typeset.md-content__inner.rs-showcase > .rs-release > :is(.rs-release__kicker, h1, .rs-release__copy) {
      animation: rs-rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    }
    .md-typeset.md-content__inner.rs-showcase > .rs-release > h1 {
      animation-delay: 0.08s;
    }
    .md-typeset.md-content__inner.rs-showcase > .rs-release > .rs-release__copy {
      animation-delay: 0.2s;
    }
    .md-typeset.md-content__inner.rs-showcase > .rs-release > :is(.rs-tour__stage, .rs-tour__tabs) {
      animation: rs-fade 1s ease 0.3s both;
    }
    .md-typeset.md-content__inner.rs-showcase .rs-release h1::after {
      transform-origin: left;
      animation: rs-draw 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.55s both;
    }
  }
  /* ---------------------------------------------------------------- sizes */

  @media (max-width: 59.9375em) {
    .md-typeset.md-content__inner.rs-showcase > .rs-release {
      grid-template-columns: minmax(0, 1fr);
      grid-template-areas: "kicker" "title" "copy" "stage" "tabs";
      padding-top: 2.2rem;
    }
    .md-typeset.md-content__inner.rs-showcase .rs-release h1 {
      font-size: 2rem;
    }
    .md-typeset .rs-tour__stage {
      margin-top: 2rem;
    }
    .md-typeset .rs-tour__tabs {
      grid-template-columns: none;
      grid-auto-flow: column;
      grid-auto-columns: 7.4rem;
      margin: 2rem calc(-1 * var(--rs-bleed)) 0;
      padding: 0 var(--rs-bleed);
      overflow-x: auto;
      scroll-snap-type: x proximity;
      scrollbar-width: none;
    }
    .md-typeset .rs-tour__tabs::-webkit-scrollbar {
      display: none;
    }
    .md-typeset .rs-tour__tab {
      scroll-snap-align: start;
    }
    .md-typeset .rs-spread,
    .md-typeset .rs-spread--flip,
    .md-typeset .rs-feature--dark .rs-spread,
    .md-typeset .rs-feature--dark .rs-spread--flip {
      grid-template-columns: minmax(0, 1fr);
      row-gap: 1.4rem;
    }
    .md-typeset .rs-spread--flip > .rs-spread__text {
      order: 0;
    }
    .md-typeset .rs-spread__text {
      position: static;
    }
    .md-typeset.md-content__inner.rs-showcase h2.rs-chapter {
      font-size: 2rem;
      padding-right: 4.6rem;
    }
    .md-typeset.md-content__inner.rs-showcase h2.rs-chapter::before {
      font-size: 3.6rem;
    }
  }

  @media (max-width: 44.9375em) {
    .md-typeset.md-content__inner:has(> .rs-release) > .rs-release {
      --rs-release-bevel: 1.2rem;
    }
    .md-typeset.md-content__inner.rs-showcase .rs-release h1 {
      font-size: 1.7rem;
    }
    .md-typeset.md-content__inner.rs-showcase .rs-release .rs-release__mark {
      font-size: 11rem;
      top: auto;
      bottom: 9rem;
    }
    .md-typeset .rs-tour__where {
      display: none;
    }
    .md-typeset .rs-spread__media {
      padding: 0.8rem;
      margin: 0 calc(-1 * var(--rs-bleed));
    }
    .md-typeset.md-content__inner.rs-showcase > .rs-pullquote p {
      font-size: 1.15rem;
    }
    .md-typeset.md-content__inner.rs-showcase .rs-spread__text > h3 {
      font-size: 1.3rem;
    }
    .md-typeset .rs-feature--dark .rs-spread__text > p {
      font-size: 1.5rem;
    }
    .md-typeset .rs-chapterbar__mark {
      display: none;
    }
  }
}

@keyframes rs-tour-dwell {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes rs-rise {
  from { opacity: 0; transform: translateY(0.8rem); }
  to   { opacity: 1; transform: none; }
}
@keyframes rs-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes rs-draw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@media print {
  .rs-chapterbar,
  .rs-tour__stage,
  .rs-tour__tabs,
  .rs-chapter-toc {
    display: none !important;
  }
}