@charset "UTF-8";
.u_debug,
.u_debug-plain {
  outline: 1px solid rgba(192, 192, 192, 0.5);
}
.u_debug *,
.u_debug-plain * {
  outline: 1px dotted rgba(192, 192, 192, 0.5);
}
.u_debug svg *,
.u_debug-plain svg * {
  outline: none;
}

.u_debug--breakpoint {
  position: absolute;
  display: none;
  width: 0px;
  top: 0;
  z-index: 101;
  bottom: 0;
  outline: none;
}
.u_debug--breakpoint span {
  outline: none;
  font-size: xx-small;
  transform: rotateZ(90deg);
  transform-origin: bottom left;
  display: block;
}
@media (min-width: 380px) {
  .u_debug--breakpoint.mobile {
    display: block;
    left: 380px;
    border-left: 1px dotted var(--red-500);
    color: var(--red-500);
  }
}
@media (min-width: 720px) {
  .u_debug--breakpoint.small {
    display: block;
    left: 720px;
    border-left: 1px dotted var(--yellow-500);
    color: var(--yellow-500);
  }
}
@media (min-width: 960px) {
  .u_debug--breakpoint.medium {
    display: block;
    left: 960px;
    border-left: 1px dotted var(--green-500);
    color: var(--green-500);
  }
}
@media (min-width: 72rem) {
  .u_debug--breakpoint.desktop {
    display: block;
    left: 72rem;
    border-left: 1px dotted var(--blue-500);
    color: var(--blue-500);
  }
}
.u_debug--info {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  font-size: 0.5rem;
  opacity: 0;
  transition: opacity 0.3s linear;
}
.has--image-omitted .u_debug--info {
  color: currentcolor;
}
.u_debug--info.raised {
  margin-top: var(--base-unit--neg);
}
.u_debug--info.static {
  position: static;
}

*:has(> .u_debug--info) {
  position: relative;
}

body:has(> .u_debug--info) .o_header:hover,
*:hover > .u_debug--info {
  opacity: 0.75;
  z-index: 10;
}

summary {
  cursor: pointer;
  list-style-type: none;
  display: flex;
  align-content: baseline;
}
summary svg {
  width: 1em;
  margin-bottom: -0.125em;
}
summary:focus-within {
  outline: 2px solid var(--black);
}
summary::-webkit-details-marker, summary::marker {
  display: none;
}
summary[plain]:before {
  display: none;
}

.a_image {
  position: relative;
  display: block;
}
.a_image figcaption p {
  margin-bottom: 0;
  max-width: 100%;
}
.a_image img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}
.a_image--contain img {
  object-fit: contain;
  height: auto;
  width: 100%;
}
.a_image--has-caption img {
  height: max-content;
}
.a_image--pan {
  overflow: hidden;
}
.a_image--hide-caption figcaption {
  display: none;
}
@media screen and (min-width: 720px) {
  .a_image--inline {
    width: calc(50% - var(--base-unit--s));
    float: right;
    clear: right;
    margin-left: var(--base-unit);
  }
  .a_image--inline.large {
    width: 66%;
  }
}

.a_image--pan {
  position: relative;
  overflow: hidden;
}

ken-burns-carousel {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.a_ratio--1x1 {
  aspect-ratio: 1/1;
}
.a_ratio--2x1 {
  aspect-ratio: 2/1;
}
.a_ratio--1x2 {
  aspect-ratio: 1/2;
}
@media (orientation: landscape) {
  .a_ratio--2x1\@landscape {
    aspect-ratio: 2/1;
  }
}
.a_ratio--3x2 {
  aspect-ratio: 3/2;
}
.a_ratio--2x3 {
  aspect-ratio: 2/3;
}
.a_ratio--gm {
  aspect-ratio: 1618/1000;
}
.a_ratio--video {
  aspect-ratio: 16/9;
}

.l_beam {
  display: flex;
  gap: var(--gap);
  align-items: baseline;
  flex-wrap: wrap;
}
.l_beam--nowrap {
  flex-wrap: nowrap;
}
.l_beam.middle {
  justify-content: center;
}
.l_beam.right {
  justify-content: flex-end;
}
.l_beam.space-between {
  justify-content: space-between;
}
.l_beam.space-around {
  justify-content: space-around;
}
.l_beam.space-evenly {
  justify-content: space-evenly;
}
.l_beam.middlev {
  align-items: center;
}
.l_beam.bottom {
  align-items: flex-end;
}

.l_column {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  align-items: baseline;
  flex-wrap: wrap;
}
.l_column.top {
  justify-content: flex-start;
}
.l_column.middlev {
  justify-content: center;
}
.l_column.bottom {
  justify-content: flex-end;
}
.l_column.space-between {
  justify-content: space-between;
}
.l_column.space-round {
  justify-content: space-around;
}
.l_column.middle {
  align-items: center;
}
.l_column.right {
  align-items: flex-end;
}

.u_m {
  margin: var(--base-unit);
}
.u_m--t {
  margin-top: var(--base-unit);
}
.u_m--tt {
  margin-top: var(--base-unit--b);
}
.u_m--t- {
  margin-top: var(--base-unit--s);
}
.u_m--b {
  margin-bottom: var(--base-unit);
}
.u_m--bb {
  margin-bottom: var(--base-unit--b);
}
.u_m--b- {
  margin-bottom: var(--base-unit--s);
}
.u_m--l {
  margin-left: var(--base-unit);
}
.u_m--ll {
  margin-left: var(--base-unit--b);
}
.u_m--l- {
  margin-left: var(--base-unit--s);
}
.u_m--r {
  margin-right: var(--base-unit);
}
.u_m--rr {
  margin-right: var(--base-unit--b);
}
.u_m--r- {
  margin-right: var(--base-unit--s);
}

.u_p {
  padding: var(--base-unit);
}
.u_p--t {
  padding-top: var(--base-unit);
}
.u_p--tt {
  padding-top: var(--base-unit--b);
}
.u_p--t- {
  padding-top: var(--base-unit--s);
}
.u_p--b {
  padding-bottom: var(--base-unit);
}
.u_p--bb {
  padding-bottom: var(--base-unit--b);
}
.u_p--b- {
  padding-bottom: var(--base-unit--s);
}
.u_p--l {
  padding-left: var(--base-unit);
}
.u_p--ll {
  padding-left: var(--base-unit--b);
}
.u_p--l- {
  padding-left: var(--base-unit--s);
}
.u_p--r {
  padding-right: var(--base-unit);
}
.u_p--rr {
  padding-right: var(--base-unit--b);
}
.u_p--r- {
  padding-right: var(--base-unit--s);
}

.l_gap {
  gap: var(--base-unit);
}
.l_gap--small {
  gap: var(--base-unit--s) !important;
}
.l_gap--large {
  gap: var(--base-unit--b) !important;
}

.l_grid {
  display: grid;
  width: 100%;
}
@media (max-width: 380px) {
  .l_grid {
    width: 100%;
  }
}
.l_grid--twin {
  grid-template-columns: 1fr 1fr;
}
@media (min-width: 380px) {
  .l_grid--twin\@mobile {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 720px) {
  .l_grid--twin\@small {
    grid-template-columns: 1fr 1fr;
  }
}
.l_grid--tri {
  grid-template-columns: 1fr 1fr 1fr;
}
@media (min-width: 720px) {
  .l_grid--tri\@small {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media (min-width: 960px) {
  .l_grid--tri\@medium {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
.l_grid--auto {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.l_grid--parent-rules {
  display: grid;
  grid-template-rows: subgrid;
  grid-gap: 0;
  grid-row: span 2;
}
.l_grid.staggered {
  grid-auto-flow: dense;
}
.l_grid.staggered .landscape {
  grid-column: span 2;
}
@media (min-width: 72rem) {
  .l_grid.staggered .landscape {
    grid-row: span 2;
  }
}
.l_grid.staggered .landscape:nth-of-type(even) {
  grid-column-end: -1;
}
.l_grid.top {
  align-items: start;
}
.l_grid.middlev {
  align-items: center;
  align-content: center;
}
.l_grid.bottom {
  align-items: end;
  align-content: end;
}
.l_grid.space-between {
  justify-content: space-between;
}
.l_grid.left {
  justify-content: start;
}
.l_grid.middle {
  justify-content: center;
}
.l_grid.right {
  justify-content: end;
}

.l_height-limited {
  height: 50vh;
}

.l_superimposed {
  position: relative;
  height: max-content;
}
.l_superimposed--fullscreen {
  width: 100%;
  height: 100vh;
}
.l_superimposed--fixed {
  position: fixed;
}
.l_superimposed__inner {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  color: var(--white);
}
.l_superimposed__inner.bg-gradient {
  background: var(--superimposed-bg);
}
.l_superimposed figure {
  height: 100%;
  width: 100%;
}

.u_hide {
  display: none;
}
@media screen and (max-width: 720px) {
  .u_hide--to-small {
    display: none;
  }
}
@media screen and (min-width: 720px) {
  .u_hide--from-small {
    display: none;
  }
}
@media screen and (max-width: 960px) {
  .u_hide--to-medium {
    display: none;
  }
}
@media screen and (min-width: 960px) {
  .u_hide--from-medium {
    display: none;
  }
}
@media screen and (max-width: 72rem) {
  .u_hide--to-desktop {
    display: none;
  }
}
@media screen and (min-width: 72rem) {
  .u_hide--from-desktop {
    display: none;
  }
}
.u_hide--always {
  display: none;
}

/* scss/7-utilities/_u_edit-in-txp.scss */
.u_edit-in-txp {
  position: absolute;
  z-index: 1;
  opacity: 1;
  cursor: pointer;
}
.u_edit-in-txp.static {
  position: static;
  display: inline-block;
  margin-top: -0.5em;
}
.u_edit-in-txp img {
  object-fit: contain;
  position: relative;
  top: var(--base-unit--ss);
}
.u_edit-in-txp:hover {
  filter: invert(100%);
}

.u_edit-in-txp--image {
  top: calc(var(--base-unit) / 3);
  right: var(--base-unit--s);
}
.u_edit-in-txp--image:hover {
  filter: invert(100%);
}

.u_clamp {
  overflow: hidden;
  display: -webkit-box;
  box-orient: vertical;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.u_clamp > p {
  margin-bottom: 0;
}
.u_clamp > *:not(:first-child) {
  display: none;
}
.u_clamp--2 {
  line-clamp: 2;
  -webkit-line-clamp: 2;
}
.u_clamp--3 {
  line-clamp: 3;
  -webkit-line-clamp: 3;
}

.u_contents {
  display: contents;
}

@media (min-height: 960px) {
  .nav-container {
    position: sticky;
    top: 6rem;
    z-index: 10;
    background-color: var(--clr-bkgd);
  }
}
.site-header {
  width: 100%;
  max-width: 100%;
  background-color: var(--clr-bkgd);
}
.site-header > div {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  align-items: baseline;
  width: 90%;
  max-width: 72rem;
  margin-inline: auto;
}
@media (min-height: 960px) {
  .site-header {
    position: sticky;
    z-index: 10;
    top: -3rem;
    padding-top: clamp(0.5rem, 5vh, 3rem);
    background-color: var(--clr-bkgd);
  }
}

.masthead25 {
  font-weight: 400;
}
.masthead25 a {
  text-decoration: none;
}
.masthead25 a:focus {
  padding-bottom: var(--gap);
}

#site-navigation {
  font-family: var(--font-serif);
}
#site-navigation ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1rem;
  width: 90%;
  max-width: 72rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
#site-navigation a {
  display: block;
  color: var(--clr-text);
  font-size: 1.375em;
  font-weight: 400;
  text-wrap: nowrap;
}
#site-navigation a:hover {
  text-decoration: none;
  position: relative;
}
#site-navigation a:hover:after {
  content: "";
  position: absolute;
  background-color: white;
  left: 0;
  right: 0;
  top: 2cap;
  border-bottom: var(--clr-text) 0.25rem solid;
}
#site-navigation a:focus {
  background-color: var(--clr-nav-interact);
}
#site-navigation .active a {
  font-weight: 600;
}
#site-navigation .active a:hover:after {
  display: none;
}
.hammer-chisel {
  display: inline-block;
  margin-right: 1rem;
  height: 3rem;
  vertical-align: middle;
}
.hammer-chisel .hammer,
.hammer-chisel .chisel {
  transition: transform 0.6s ease-in-out;
  transform-origin: center center;
}
.hammer-chisel:hover .hammer, .hammer-chisel.is-active .hammer, .site-header:hover .hammer-chisel .hammer {
  transform: rotateZ(90deg);
}
.hammer-chisel:hover .chisel, .hammer-chisel.is-active .chisel, .site-header:hover .hammer-chisel .chisel {
  transform: rotateZ(-90deg);
}

.search-form {
  position: static;
}
@media (max-width: 480px) {
  .search-form:has([type=search]:focus) {
    position: absolute;
    right: 0;
    left: 3.5rem;
    top: 2rem;
  }
  .search-form:has([type=search]:focus) [type=search] {
    height: 2.5rem;
  }
}
.search-form [type=search] {
  height: initial;
  border-color: var(--clr-bkgd);
  cursor: pointer;
  background: var(--clr-bkgd-form) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='%23333'%3E%3Cpath d='M4,13c0-5,4-9,9-9s9,4,9,9s-4,9-9,9S4,18,4,13z M13,19c3.3,0,6-2.7,6-6s-2.7-6-6-6s-6,2.7-6,6S9.7,19,13,19z'/%3E%3Cpath d='M17.5,19l1.5-1.5l4.5,3L28,25c0,0,0,1.5-0.8,2.2S25,28,25,28l-4.5-4.5L17.5,19z'/%3E%3C/g%3E%3C/svg%3E") no-repeat left center;
}
.search-form [type=search]:focus {
  cursor: initial;
  width: max-content;
  transition: width 0.2s ease-in-out;
  border-color: var(--clr-focus);
  border-width: 2px;
}

button,
[type=button],
[type=reset],
[type=submit],
.button {
  display: grid;
  place-items: center;
  padding-inline: 1rem;
  height: 2rem;
  border-radius: 1rem;
  background-color: var(--yellow);
  position: relative;
  transition: filter ease-out 0.3s;
  text-decoration: none;
}
button.accessibility,
[type=button].accessibility,
[type=reset].accessibility,
[type=submit].accessibility,
.button.accessibility {
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  clip: rect(0 0 0 0);
  border: 0;
  white-space: nowrap;
}
button:after,
[type=button]:after,
[type=reset]:after,
[type=submit]:after,
.button:after {
  transition: transform 0.3s ease-out;
  transform: scale(0.9);
}
button:hover,
[type=button]:hover,
[type=reset]:hover,
[type=submit]:hover,
.button:hover {
  text-decoration: none;
  color: var(--clr-text);
}
button:hover:after,
[type=button]:hover:after,
[type=reset]:hover:after,
[type=submit]:hover:after,
.button:hover:after {
  content: "";
  position: absolute;
  left: -2px;
  top: -2px;
  right: -2px;
  bottom: -2px;
  z-index: 1;
  border: 2px solid var(--clr-text);
  border-radius: calc(1rem + 4px);
  transform: scale(1);
}
button:focus,
[type=button]:focus,
[type=reset]:focus,
[type=submit]:focus,
.button:focus {
  border: 4px solid var(--clr-text);
  background: var(--black);
  color: white;
}

.homepage {
  --logo-height: calc(40vh - 3rem);
  --dot-size: clamp(1.5rem, 3.5vw, 3rem);
  /* Act 1 motion config (fractions of logo height) */
  --act1-baseline: 0.65;
  --act1-a-big: 1;
  --act1-a-med: 0.75;
  --act1-a-small: 0.35;
  --act1-a-mini: 0.5;
  /* Act 2 motion config */
  --act2-baseline: 0.275;
  --act2-helix-ampl: .05;
  --act2-helix-cycles: 3;
  --act2-dots-per-strand: 18;
  --act2-stream-duration: 6s;
  --act2-strandB-delay: 0.125;
  /* Act 3 motion config */
  --act3-baseline: .35;
  --act3-forward-duration: 3s;
  --act3-loop-duration: 1s;
  --act3-return-duration: 3s;
  --act3-separation: 18;
  --act3-pulse-radius: 24;
  --act3-loop-radius: .6;
}
@media (min-width: 480px) {
  .homepage {
    --act2-helix-cycles: 4;
  }
}
@media (min-width: 720px) {
  .homepage {
    --act3-baseline: .45;
    --act3-separation: 36;
  }
}
@media (min-width: 72rem) {
  .homepage {
    /* Act 2 motion config */
    --act2-helix-ampl: .125;
    --act2-stream-duration: 8s;
    --act3-forward-duration: 5s;
    --act3-loop-duration: 1s;
    --act3-return-duration: 5s;
  }
}
@media (min-width: 92rem) {
  .homepage {
    /* Act 2 motion config */
    --act2-dots-per-strand: 24;
    --act2-stream-duration: 10s;
    --act3-separation: 48;
  }
}

.h25-hero {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 40vh;
  grid-template-columns: auto 1fr;
  width: 100%;
  margin-bottom: calc(var(--gap) * -0.125);
  /* Two overlays aligned to the hero’s on-screen box */
  /* HTML dot styling (CSS controls size per act) */
}
@media (min-width: 72rem) {
  .h25-hero {
    grid-template-columns: 1fr 72rem 1fr;
  }
}
.h25-hero .hero-play {
  padding: var(--gap);
  height: 100%;
}
.h25-hero .hero-play:focus {
  outline: 0;
}
.h25-hero.is-inactive .hero-play {
  display: flex;
  transition: transform 1s ease;
}
.h25-hero.is-inactive .hero-play:focus .hero-play__dot {
  border: 2px solid var(--black);
}
.h25-hero.is-inactive .hero-play__dot {
  width: 3rem;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background: var(--dot-color, var(--yellow));
  animation: bounce 2s;
  animation-iteration-count: 3;
  transform: translateY(calc(var(--logo-height) / 2));
}
.h25-hero.is-inactive .hero-play:hover {
  transform: scale(1.2);
}
.h25-hero .logo,
.h25-hero svg {
  grid-column-start: 2;
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 72rem) {
  .h25-hero .logo,
  .h25-hero svg {
    width: 90%;
    margin-inline: auto;
  }
}
.h25-hero .logo {
  position: relative;
  z-index: 1;
}
.h25-hero #dots-back {
  z-index: 0;
}
.h25-hero #dots-front {
  z-index: 2;
}
.h25-hero .dots-layer {
  position: absolute;
  left: 0;
  width: 100vw;
  height: 1px;
  top: 0;
  pointer-events: none;
  overflow: visible;
  contain: layout paint;
}
.h25-hero .dot {
  position: absolute;
  width: var(--dot-size, 12px);
  aspect-ratio: 1/1;
  border-radius: 50%;
  background: var(--dot-color, var(--yellow));
  transform: translate3d(-9999px, -9999px, 0);
  will-change: transform;
}

@keyframes bounce {
  0% {
    transform: translateY(calc(var(--logo-height) / 2));
    animation-timing-function: ease-in-out;
  }
  50% {
    transform: translateY(var(--logo-height));
    animation-timing-function: ease-in-out;
  }
  100% {
    transform: translateY(calc(var(--logo-height) / 2));
    animation-timing-function: ease-in-out;
  }
}
.homepage {
  --yellow: #f5c400;
  --gap: 1rem;
  --base-unit: var(--gap);
  --clr-text: var(--black);
  --clr-text-promoted: var(--black);
  --clr-bkgd-form: white;
  --clr-bkgd: white;
  --clr-text-form: var(--black);
  --black: rgb(43, 43, 43);
  --heading: clamp(2rem, 8vw, 2.5rem);
  --clr-focus: var(--yellow);
  --clr-a-interact: var(--yellow);
  --clr-nav-interact: var(--yellow);
}
.homepage ::selection {
  background-color: var(--yellow);
}
.homepage .downloads {
  width: 90%;
  max-width: 72rem;
  margin-inline: auto;
}
.homepage .p-style {
  font-size: 1.375rem;
  font-weight: 400;
}
.homepage h1,
.homepage h2,
.homepage h3,
.homepage h4,
.homepage h5 {
  font-weight: 400;
}
.homepage .serif {
  font-family: var(--font-serif);
}

.l_width-limited {
  margin-inline: auto;
  max-width: 72rem;
}

.bg--yellow {
  background-color: var(--yellow);
}

.bg--black {
  background-color: var(--black);
}

.bg--grey {
  background-color: gray;
}

.txt--white {
  color: white;
}

p {
  max-width: 72ch;
}

span:has(meta:only-child) {
  display: none;
}

a {
  color: var(--clr-text);
}
main a {
  text-decoration: underline;
}
a:hover {
  color: inherit;
}
a:focus {
  color: var(--black);
  background-color: var(--yellow);
  text-decoration: none;
  outline: 0;
}
a:has(img) {
  display: inline-block;
}
.bg--yellow a:focus {
  color: white;
  background-color: var(--black);
  text-decoration: none;
}

.txt--right {
  text-align: right;
}

.h25-main {
  position: relative;
  padding: 10vh 1rem;
  display: grid;
  grid-template-columns: 0 1fr 0.2fr;
  gap: var(--gap);
}
@media (min-width: 640px) {
  .h25-main {
    grid-template-columns: 2rem 1fr 0.2fr;
    gap: calc(var(--gap) * 2);
  }
}
@media (min-width: 92rem) {
  .h25-main {
    gap: calc(var(--gap) * 3);
    grid-template-columns: 1fr 72rem 1fr;
  }
}
.h25-main__side {
  position: relative;
}
@media (max-width: 480px) {
  .h25-main__side img {
    max-width: 9vw;
    margin-left: calc(var(--gap) * 2);
  }
}
@media (min-width: 640px) and (max-width: 92rem) {
  .h25-main__side img {
    max-width: 6vw;
  }
}

.h25-features {
  display: grid;
}
@media (min-width: 640px) {
  .h25-features {
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--gap) * 3);
  }
}

.h25-feature__heading {
  font-size: calc(var(--heading) * 0.75);
  line-height: 1.5cap;
}
@media (min-width: 640px) {
  .h25-feature__heading {
    font-size: var(--heading);
  }
}
.h25-feature__heading.large {
  font-size: calc(var(--heading) * 1.5);
  margin-top: 0;
}
@media (min-width: 72rem) {
  .h25-feature__copy {
    font-size: 1.5rem;
  }
}

.h25-reasons {
  justify-content: center;
}

.h25-reason__content {
  display: grid;
  gap: var(--gap);
}
@media (min-width: 720px) {
  .h25-reason__content {
    grid-template-columns: 0.5fr 1fr;
  }
}
@media (min-width: 92rem) {
  .h25-reason__content {
    grid-template-columns: 1fr 1fr;
  }
}

.staging img {
  width: 100%;
}
.staging figcaption {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  gap: 0;
}
.staging figcaption p {
  margin: 0;
}

.h25-faq {
  display: grid;
  align-content: start;
}

summary .h25-details__icon {
  margin-inline-end: var(--gap);
  transition: transform 0.3s ease;
}
summary .h25-details__icon__bg {
  fill: none;
}
summary:hover .h25-details__icon {
  transform: scale(1.2);
}

details[open] summary .h25-details__icon {
  transform: scale(1.2);
}
details[open] summary .h25-details__icon .vert {
  fill: none;
}
details[open] p {
  margin-inline-start: calc(var(--heading) + var(--gap) * 2);
}

.h25-showcase {
  margin-right: var(--gap);
  width: clamp(256px, 18vw, 480px);
  font-size: smaller;
}
.h25-showcase figure {
  margin-block: 0;
}

.h25-ads {
  display: grid;
  place: center;
  gap: var(--gap);
  font-size: smaller;
  padding: 10vh var(--gap);
}
@media (min-width: 720px) {
  .h25-ads {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 72rem) {
  .h25-ads {
    padding: 10vh var(--gap);
  }
}
.h25-ads img {
  max-width: 256px;
  filter: grayscale(100%);
  transition: filter 0.6s ease;
}
.h25-ads:hover img {
  filter: none;
}

.h25-footer > div {
  display: grid;
  place: center;
  gap: var(--gap);
  padding: 10vh var(--gap);
  color: white;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px) {
  .h25-footer > div {
    grid-template-columns: repeat(3, 1fr);
  }
}
.h25-footer a:not(.button) {
  color: inherit;
}
.h25-footer li {
  margin-bottom: calc(var(--gap) / 2);
}

.clickEffect {
  pointer-events: none;
  margin-left: -0.25rem;
  margin-top: -0.25rem;
  animation: clickEffect 0.4s ease-out;
  z-index: 99999;
}
.clickEffect:before, .clickEffect:after {
  content: "";
}
.clickEffect:before {
  animation: clickEffectLeft 0.4s ease-out;
}
.clickEffect:after {
  animation: clickEffectRight 0.4s ease-out;
}

.clickEffect,
.clickEffect:before,
.clickEffect:after {
  position: fixed;
  background-color: var(--yellow);
  border-radius: 50%;
  aspect-ratio: 1/1;
  width: 1rem;
}

@keyframes clickEffect {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes clickEffectLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-1rem);
  }
}
@keyframes clickEffectRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(1rem);
  }
}
.dot {
  position: relative;
  aspect-ratio: 1/1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transform: translateZ(0);
  max-width: 100%;
}

.scene .dot--site > * {
  display: none;
}
.scene .dot--site .showfirst {
  display: initial;
}
.scene .dot--site.active .showfirst {
  display: none;
}
.scene .dot--site.active .showfirst + * {
  display: initial;
}

.performance__stats {
  margin-inline-start: 15%;
}
.performance__spec {
  display: grid;
  place-items: center;
}

.staging [aria-label="TXP staging"] {
  width: 100%;
}
.code {
  background: transparent;
  position: relative;
  padding: 0;
  border: 0;
}
.code__stage {
  position: relative;
  z-index: 0;
  text-align: center;
}

.caret {
  z-index: 2;
  position: absolute;
  top: -1em;
  width: 2px;
  height: 2em;
  background: var(--black);
  left: 0;
  transform: translateX(0);
  opacity: 1;
  pointer-events: none;
}
.caret:before, .caret:after {
  background: var(--black);
  content: "";
  position: absolute;
  left: -3px;
  right: -3px;
  height: 1px;
}
.caret:before {
  top: 0;
}
.caret:after {
  bottom: 0;
}

.selection {
  position: absolute;
  z-index: -1;
  top: 0;
  height: 2em;
  background: white;
  backdrop-filter: invert(100%);
  left: 0;
  opacity: 0;
  pointer-events: none;
}

/* Motion preferences */
@media (prefers-reduced-motion: reduce) {
  .h25-reason * {
    animation: none !important;
    transition: none !important;
  }
}
/*! Flickity v2.3.0
https://flickity.metafizzy.co
---------------------------------------------- */
.carousel {
  height: 100%;
}

.gallery-cell {
  width: 100%;
  height: 100%;
  object-fit: contain;
  margin-right: var(--base-unit);
}

/* cell number */
.flickity-enabled {
  position: relative;
}

.flickity-enabled:focus .flickity-viewport {
  outline: 2px auto var(--yellow);
}

.flickity-viewport {
  overflow: hidden;
  position: relative;
  height: 100%;
}

.flickity-slider {
  position: absolute;
  width: 100%;
  height: 100%;
}

/* draggable */
.flickity-enabled.is-draggable {
  outline: 0;
}

.flickity-enabled.is-draggable .flickity-viewport {
  cursor: move;
  cursor: -webkit-grab;
  cursor: grab;
}

.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

/* ---- flickity-button ---- */
.flickity-button {
  position: absolute;
  background: hsla(0, 0%, 100%, 0.75);
  border: none;
  color: #333;
}

.flickity-button:hover {
  cursor: pointer;
}

.flickity-button:active {
  opacity: 0.6;
}

.flickity-button:disabled {
  opacity: 0.3;
  cursor: auto;
  pointer-events: none;
}

.flickity-button-icon {
  fill: currentColor;
}

/* ---- previous/next buttons ---- */
.flickity-prev-next-button {
  top: 100%;
  width: var(--gap);
  height: var(--gap);
  border-radius: 50%;
  /* vertically center */
}

.flickity-prev-next-button.previous {
  left: 10px;
}

.flickity-prev-next-button.next {
  right: 10px;
}

/* right to left */
.flickity-rtl .flickity-prev-next-button.previous {
  left: auto;
  right: 10px;
}

.flickity-rtl .flickity-prev-next-button.next {
  right: auto;
  left: 10px;
}

.flickity-prev-next-button .flickity-button-icon {
  position: absolute;
  left: 20%;
  top: 20%;
  width: 60%;
  height: 60%;
}

/* ---- page dots ---- */
.flickity-page-dots {
  padding: 0;
  text-align: center;
}

.flickity-rtl .flickity-page-dots {
  direction: rtl;
}

.flickity-page-dots .dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 8px;
  background: var(--clr-text);
  border-radius: 50%;
  opacity: 0.25;
  cursor: pointer;
}

.flickity-page-dots .dot.is-selected {
  opacity: 1;
}

/*# sourceMappingURL=h25.css.map */