/* src/css/normalize.css */
html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  line-height: 1.15;
}

body {
  margin: 0;
}

article, aside, footer, header, nav, section {
  display: block;
}

h1 {
  margin: .67em 0;
  font-size: 2em;
}

figcaption, figure, main {
  display: block;
}

figure {
  margin: 1em 40px;
}

hr {
  box-sizing: content-box;
  overflow: visible;
  height: 0;
}

pre {
  font-family: monospace;
  font-size: 1em;
}

a {
  -webkit-text-decoration-skip: objects;
  background-color: #0000;
}

abbr[title] {
  text-decoration: underline;
  text-decoration: underline dotted;
  border-bottom: none;
}

b, strong {
  font-weight: inherit;
  font-weight: bolder;
}

code, kbd, samp {
  font-family: monospace;
  font-size: 1em;
}

dfn {
  font-style: italic;
}

mark {
  color: #000;
  background-color: #ff0;
}

small {
  font-size: 80%;
}

sub, sup {
  position: relative;
  vertical-align: baseline;
  font-size: 75%;
  line-height: 0;
}

sub {
  bottom: -.25em;
}

sup {
  top: -.5em;
}

audio, video {
  display: inline-block;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

img {
  border-style: none;
}

svg:not(:root) {
  overflow: hidden;
}

button, input, optgroup, select, textarea {
  margin: 0;
  font-family: sans-serif;
  font-size: 100%;
  line-height: 1.15;
}

button, input {
  overflow: visible;
}

button, select {
  text-transform: none;
}

button, html [type="button"], [type="reset"], [type="submit"] {
  -webkit-appearance: button;
}

button::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

[type="button"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

[type="reset"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring {
  outline: 1px dotted buttontext;
}

[type="button"]:-moz-focusring {
  outline: 1px dotted buttontext;
}

[type="reset"]:-moz-focusring {
  outline: 1px dotted buttontext;
}

[type="submit"]:-moz-focusring {
  outline: 1px dotted buttontext;
}

fieldset {
  padding: .35em .75em .625em;
}

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  white-space: normal;
  max-width: 100%;
  padding: 0;
}

progress {
  display: inline-block;
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type="checkbox"], [type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

[type="number"]::-webkit-inner-spin-button {
  height: auto;
}

[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

details, menu {
  display: block;
}

summary {
  display: list-item;
}

canvas {
  display: inline-block;
}

template, [hidden] {
  display: none;
}

/* src/css/base/base.css */
html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  background: var(--color-bg-2);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

hr {
  display: block;
  background: var(--color-bg-3);
  border: 0;
  height: 1px;
  margin-top: 24px;
  margin-bottom: 24px;
}

summary {
  cursor: pointer;
}

ul, ol {
  margin-top: 0;
  margin-bottom: 24px;
  padding-left: 24px;
}

ul {
  list-style: disc;
}

ol {
  list-style: decimal;
}

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

.dl {
  margin-top: 0;
  margin-bottom: 24px;
}

.dt {
  font-weight: var(--font-weight-semibold);
}

.dd {
  margin-bottom: 24px;
  margin-left: 24px;
}

.img {
  vertical-align: middle;
  max-width: 100%;
  height: auto;
}

figure {
  margin: 24px 0;
}

figcaption {
  font-size: var(--font-size-eta);
  line-height: var(--line-height-eta);
  letter-spacing: var(--kerning-eta);
  padding: 8px 0;
}

img, svg {
  display: block;
}

table {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 24px;
}

tr {
  border-bottom: 1px solid var(--color-bg-3);
}

th {
  text-align: left;
}

th, td {
  padding: 10px 16px;
}

th:first-child, td:first-child {
  padding-left: 0;
}

th:last-child, td:last-child {
  padding-right: 0;
}

/* src/css/base/typography.css */
html {
  font-size: var(--font-size-epsilon);
  line-height: var(--line-height-epsilon);
  letter-spacing: var(--kerning-epsilon);
}

@media (min-width: 640px) {
  html {
    font-size: var(--font-size-epsilon);
    line-height: var(--line-height-epsilon);
    letter-spacing: var(--kerning-epsilon);
  }
}

@media print {
  html {
    font-size: var(--print-font-size-5);
    line-height: var(--print-line-height-5);
    letter-spacing: var(--print-kerning-5);
  }
}

body {
  color: var(--color-typography-2);
  font-size: 1rem;
}

body, .button, .input, .select, .textarea {
  font-family: var(--font-family-base);
}

a {
  color: var(--x-link-color, var(--color-typography-2));
  text-decoration: underline;
}

a:hover {
  outline: 0;
  text-decoration: none;
}

a:active {
  outline: 0;
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  clear: both;
  color: var(--color-typography-1);
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-semibold);
  scroll-margin-top: 65px;
}

h1, .h1 {
  font-size: var(--font-size-beta);
  line-height: var(--line-height-beta);
  letter-spacing: var(--kerning-beta);
}

@media (min-width: 640px) {
  :is(h1, .h1) {
    font-size: var(--font-size-alpha);
    line-height: var(--line-height-alpha);
    letter-spacing: var(--kerning-alpha);
  }
}

@media print {
  :is(h1, .h1) {
    font-size: var(--print-font-size-1);
    line-height: var(--print-line-height-1);
    letter-spacing: var(--print-kerning-1);
  }
}

h2, .h2 {
  font-size: var(--font-size-gamma);
  line-height: var(--line-height-gamma);
  letter-spacing: var(--kerning-gamma);
}

@media (min-width: 640px) {
  :is(h2, .h2) {
    font-size: var(--font-size-beta);
    line-height: var(--line-height-beta);
    letter-spacing: var(--kerning-beta);
  }
}

@media print {
  :is(h2, .h2) {
    font-size: var(--print-font-size-2);
    line-height: var(--print-line-height-2);
    letter-spacing: var(--print-kerning-2);
  }
}

h3, .h3, .blockquote {
  font-size: var(--font-size-delta);
  line-height: var(--line-height-delta);
  letter-spacing: var(--kerning-delta);
}

@media (min-width: 640px) {
  :is(h3, .h3, .blockquote) {
    font-size: var(--font-size-gamma);
    line-height: var(--line-height-gamma);
    letter-spacing: var(--kerning-gamma);
  }
}

@media print {
  :is(h3, .h3, .blockquote) {
    font-size: var(--print-font-size-3);
    line-height: var(--print-line-height-3);
    letter-spacing: var(--print-kerning-3);
  }
}

h4, h5, h6, .h4, .h5, .h6 {
  font-size: var(--font-size-epsilon);
  line-height: var(--line-height-epsilon);
  letter-spacing: var(--kerning-epsilon);
}

@media (min-width: 640px) {
  :is(h4, h5, h6, .h4, .h5, .h6) {
    font-size: var(--font-size-delta);
    line-height: var(--line-height-delta);
    letter-spacing: var(--kerning-delta);
  }
}

@media print {
  :is(h4, h5, h6, .h4, .h5, .h6) {
    font-size: var(--print-font-size-4);
    line-height: var(--print-line-height-4);
    letter-spacing: var(--print-kerning-4);
  }
}

@media (max-width: 639px) {
  .h1-mobile {
    font-size: var(--font-size-beta);
    line-height: var(--line-height-beta);
    letter-spacing: var(--kerning-beta);
  }

  .h2-mobile {
    font-size: var(--font-size-gamma);
    line-height: var(--line-height-gamma);
    letter-spacing: var(--kerning-gamma);
  }

  .h3-mobile {
    font-size: var(--font-size-delta);
    line-height: var(--line-height-delta);
    letter-spacing: var(--kerning-delta);
  }

  .h4-mobile, .h5-mobile, .h6-mobile {
    font-size: var(--font-size-epsilon);
    line-height: var(--line-height-epsilon);
    letter-spacing: var(--kerning-epsilon);
  }
}

.text-sm {
  font-size: var(--font-size-zeta);
  line-height: var(--line-height-zeta);
  letter-spacing: var(--kerning-zeta);
}

@media print {
  .text-sm {
    font-size: var(--print-font-size-6);
    line-height: var(--print-line-height-6);
    letter-spacing: var(--print-kerning-6);
  }
}

.text-xs {
  font-size: var(--font-size-eta);
  line-height: var(--line-height-eta);
  letter-spacing: var(--kerning-eta);
}

@media print {
  .text-xs {
    font-size: var(--print-font-size-7);
    line-height: var(--print-line-height-7);
    letter-spacing: var(--print-kerning-7);
  }
}

.text-xxs {
  font-size: var(--font-size-theta);
  line-height: var(--line-height-theta);
  letter-spacing: var(--kerning-theta);
}

@media print {
  .text-xxs {
    font-size: var(--print-font-size-8);
    line-height: var(--print-line-height-8);
    letter-spacing: var(--print-kerning-8);
  }
}

h1, h2, .h1, .h2 {
  margin-top: 48px;
  margin-bottom: 16px;
}

h3, .h3 {
  margin-top: 36px;
  margin-bottom: 12px;
}

h4, h5, h6, .h4, .h5, .h6 {
  margin-top: 24px;
  margin-bottom: 4px;
}

p {
  margin-top: 0;
  margin-bottom: 24px;
}

dfn, cite, em, i {
  font-style: italic;
}

.blockquote {
  color: var(--color-typography-3);
  margin-top: 24px;
  margin-bottom: 24px;
  margin-left: 24px;
  font-style: italic;
}

.blockquote:before {
  content: "“";
}

.blockquote:after {
  content: "”";
}

.blockquote p {
  display: inline;
}

address {
  color: var(--color-typography-2);
  border-style: solid;
  border-width: 1px 0;
  border-color: var(--color-bg-3);
  margin: 0 0 24px;
  padding: 24px 0;
}

pre, pre h1, pre h2, pre h3, pre h4, pre h5, pre h6, pre .h1, pre .h2, pre .h3, pre .h4, pre .h5, pre .h6 {
  font-family: var(--font-family-pre);
}

pre, code, kbd, tt, var {
  background: var(--color-bg-2);
}

pre {
  font-size: var(--font-size-eta);
  line-height: var(--line-height-eta);
  overflow: auto;
  max-width: 100%;
  margin-top: 24px;
  margin-bottom: 24px;
  padding: 24px;
}

@media print {
  pre {
    font-size: var(--print-font-size-7);
    line-height: var(--print-line-height-7);
  }
}

code, kbd, tt, var {
  font-family: var(--font-family-code);
  font-size: var(--font-size-eta);
  padding: 2px 4px;
}

@media print {
  :is(code, kbd, tt, var) {
    font-size: var(--print-font-size-7);
  }
}

abbr, acronym {
  cursor: help;
}

mark, ins {
  text-decoration: none;
}

.small {
  font-size: var(--font-size-zeta);
  line-height: var(--line-height-zeta);
  letter-spacing: var(--kerning-zeta);
}

@media print {
  .small {
    font-size: var(--print-font-size-6);
    line-height: var(--print-line-height-6);
    letter-spacing: var(--print-kerning-6);
  }
}

b, strong {
  font-weight: var(--font-weight-semibold);
}

.button, .input, .select, .textarea, .label {
  font-size: var(--font-size-epsilon);
  line-height: var(--line-height-epsilon);
}

@media print {
  :is(.button, .input, .select, .textarea, .label) {
    font-size: var(--print-font-size-5);
    line-height: var(--print-line-height-5);
  }
}

/* src/css/base/helpers.css */
.container, .container-sm {
  padding-left: var(--content-padding-mobile);
  padding-right: var(--content-padding-mobile);
  width: 100%;
  margin: 0 auto;
}

@media (min-width: 480px) {
  :is(.container, .container-sm) {
    padding-left: var(--content-padding-desktop);
    padding-right: var(--content-padding-desktop);
  }
}

.container {
  max-width: calc(var(--container-width)  + (var(--content-padding-desktop) * 2));
}

.container-sm {
  max-width: calc(var(--container-width-sm)  + (var(--content-padding-desktop) * 2));
}

.container .container-sm {
  max-width: var(--container-width-sm);
  padding-left: 0;
  padding-right: 0;
}

.overflow-h {
  overflow: hidden;
}

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
}

.block-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.nowrap {
  white-space: nowrap;
}

.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
  width: 1px;
  height: 1px;
  position: absolute !important;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  display: block;
  font-size: var(--font-size-theta);
  letter-spacing: var(--kerning-theta);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  text-transform: uppercase;
  background-color: var(--color-bg-2);
  z-index: 100000;
  border: none;
  border-radius: 2px;
  width: auto;
  height: auto;
  padding: 16px 32px;
  line-height: 16px;
  top: 8px;
  left: 8px;
  box-shadow: 0 0 2px 2px #0009;
  clip: auto !important;
  color: var(--color-primary-1) !important;
}

.list-reset {
  list-style: none;
  padding: 0;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

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

.text-primary {
  color: var(--color-primary-1);
}

.has-top-divider, .has-bottom-divider {
  position: relative;
}

.has-top-divider:before {
  content: "";
  position: absolute;
  display: block;
  background: var(--color-bg-3);
  width: 100%;
  height: 1px;
  top: 0;
  left: 0;
}

.has-bottom-divider:after {
  content: "";
  position: absolute;
  display: block;
  background: var(--color-bg-3);
  width: 100%;
  height: 1px;
  bottom: 0;
  left: 0;
}

.o-50 {
  opacity: .5;
}

.m-0 {
  margin: 0;
}

.mt-0 {
  margin-top: 0;
}

.mr-0 {
  margin-right: 0;
}

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

.ml-0 {
  margin-left: 0;
}

.m-8 {
  margin: 8px;
}

.mt-8 {
  margin-top: 8px;
}

.mr-8 {
  margin-right: 8px;
}

.mb-8 {
  margin-bottom: 8px;
}

.ml-8 {
  margin-left: 8px;
}

.m-16 {
  margin: 16px;
}

.mt-16 {
  margin-top: 16px;
}

.mr-16 {
  margin-right: 16px;
}

.mb-16 {
  margin-bottom: 16px;
}

.ml-16 {
  margin-left: 16px;
}

.m-24 {
  margin: 24px;
}

.mt-24 {
  margin-top: 24px;
}

.mr-24 {
  margin-right: 24px;
}

.mb-24 {
  margin-bottom: 24px;
}

.ml-24 {
  margin-left: 24px;
}

.m-32 {
  margin: 32px;
}

.mt-32 {
  margin-top: 32px;
}

.mr-32 {
  margin-right: 32px;
}

.mb-32 {
  margin-bottom: 32px;
}

.ml-32 {
  margin-left: 32px;
}

.m-40 {
  margin: 40px;
}

.mt-40 {
  margin-top: 40px;
}

.mr-40 {
  margin-right: 40px;
}

.mb-40 {
  margin-bottom: 40px;
}

.ml-40 {
  margin-left: 40px;
}

.m-48 {
  margin: 48px;
}

.mt-48 {
  margin-top: 48px;
}

.mr-48 {
  margin-right: 48px;
}

.mb-48 {
  margin-bottom: 48px;
}

.ml-48 {
  margin-left: 48px;
}

.m-56 {
  margin: 56px;
}

.mt-56 {
  margin-top: 56px;
}

.mr-56 {
  margin-right: 56px;
}

.mb-56 {
  margin-bottom: 56px;
}

.ml-56 {
  margin-left: 56px;
}

.m-64 {
  margin: 64px;
}

.mt-64 {
  margin-top: 64px;
}

.mr-64 {
  margin-right: 64px;
}

.mb-64 {
  margin-bottom: 64px;
}

.mb-128 {
  margin-bottom: 128px;
}

.ml-64 {
  margin-left: 64px;
}

.mt-128 {
  margin-top: 128px;
}

.p-0 {
  padding: 0;
}

.pt-0 {
  padding-top: 0;
}

.pr-0 {
  padding-right: 0;
}

.pb-0 {
  padding-bottom: 0;
}

.pl-0 {
  padding-left: 0;
}

.p-8 {
  padding: 8px;
}

.pt-8 {
  padding-top: 8px;
}

.pr-8 {
  padding-right: 8px;
}

.pb-8 {
  padding-bottom: 8px;
}

.pl-8 {
  padding-left: 8px;
}

.p-16 {
  padding: 16px;
}

.pt-16 {
  padding-top: 16px;
}

.pr-16 {
  padding-right: 16px;
}

.pb-16 {
  padding-bottom: 16px;
}

.pl-16 {
  padding-left: 16px;
}

.p-24 {
  padding: 24px;
}

.pt-24 {
  padding-top: 24px;
}

.pr-24 {
  padding-right: 24px;
}

.pb-24 {
  padding-bottom: 24px;
}

.pl-24 {
  padding-left: 24px;
}

.p-32 {
  padding: 32px;
}

.pt-32 {
  padding-top: 32px;
}

.pr-32 {
  padding-right: 32px;
}

.pb-32 {
  padding-bottom: 32px;
}

.pl-32 {
  padding-left: 32px;
}

.p-40 {
  padding: 40px;
}

.pt-40 {
  padding-top: 40px;
}

.pr-40 {
  padding-right: 40px;
}

.pb-40 {
  padding-bottom: 40px;
}

.pl-40 {
  padding-left: 40px;
}

.p-48 {
  padding: 48px;
}

.pt-48 {
  padding-top: 48px;
}

.pr-48 {
  padding-right: 48px;
}

.pb-48 {
  padding-bottom: 48px;
}

.pl-48 {
  padding-left: 48px;
}

.p-56 {
  padding: 56px;
}

.pt-56 {
  padding-top: 56px;
}

.pr-56 {
  padding-right: 56px;
}

.pb-56 {
  padding-bottom: 56px;
}

.pl-56 {
  padding-left: 56px;
}

.p-64 {
  padding: 64px;
}

.pt-64 {
  padding-top: 64px;
}

.pr-64 {
  padding-right: 64px;
}

.pb-64 {
  padding-bottom: 64px;
}

.pl-64 {
  padding-left: 64px;
}

.sr .has-animations .is-revealing {
  visibility: hidden;
}

.has-animations .anime-element {
  visibility: hidden;
}

.anime-ready .has-animations .anime-element {
  visibility: visible;
}

.break-spaces {
  white-space: break-spaces;
}

.content-after:after {
  content: attr(data-content-after);
}

.content-before:before {
  content: attr(data-content-before);
}

.flex {
  display: flex;
}

.flex-1 {
  flex: 1;
}

.inline-block {
  display: inline-block;
}

.min-w-0 {
  min-width: 0;
}

.flex-fixed {
  flex: none;
}

.column {
  flex-direction: column;
}

.color {
  color: var(--x-color);
}

.color-50 {
  color: color-mix(in oklab, var(--x-color) 50%, var(--x-background));
}

.center {
  display: flex;
  justify-content: center;
  align-items:  center;
}

.items-center {
  align-items:  center;
}

.color-unset {
  color: unset;
}

.hover-link {
  text-decoration: none;
}

.hover-link:hover {
  text-decoration: underline;
}

.opacity-link {
  text-decoration: none;
  transition: color .2s ease-in-out;
}

.opacity-link:hover {
  text-decoration: none;
  color: var(--x-color);
  transition: color .1s ease-in-out;
}

.opacity-link.active {
  text-decoration: none;
  color: var(--x-color);
  transition: color .1s ease-in-out;
}

.b {
  font-weight: bold;
}

.nb {
  white-space: nowrap;
}

@media print {
  .hide-print {
    display: none;
  }
}

.header-brand-title {
  display: flex;
  align-items:  center;
  font-size: 16px;
  line-height: 100%;
}

.feature-icon-mask {
  mask-image: radial-gradient(circle, #000 36%, #0000 72%);
  mask-size: cover;
}

.line-height-1-6 {
  line-height: 1.6;
}

.display-none {
  display: none;
}

.display-inline {
  display: inline;
}

.display-inline-block {
  display: inline-block;
}

.no-decoration {
  text-decoration: none;
}

.fill-transparent {
  fill: transparent;
}

.square-16 {
  width: 16px;
  height: 16px;
}

.square-24 {
  width: 24px;
  height: 24px;
}

.square-32 {
  width: 32px;
  height: 32px;
}

.scale-85 {
  transform: scale(.85);
}

.scale-72 {
  transform: scale(.72);
}

.pl-7-5 {
  padding-left: 7.5px;
}

.pl-n7-5 {
  padding-left: -7.5px;
}

.pt-5 {
  padding-top: 5px;
}

.pt-n5 {
  padding-top: -5px;
}

.pl-2 {
  padding-left: 2px;
}

.mb-n5 {
  margin-bottom: -5px;
}

.mr-n2 {
  margin-right: -2px;
}

.h-16 {
  height: 16px;
}

.h-24 {
  height: 24px;
}

.h-26 {
  height: 26px;
}

.h-32 {
  height: 32px;
}

.h-100 {
  height: 100px;
}

.flex-wrap {
  flex-wrap: wrap;
}

.gap-8 {
  gap: .5rem;
}

.gap-16 {
  gap: 1rem;
}

.gap-24 {
  gap: 1.5rem;
}

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

.align-center {
  align-items:  center;
}

.mb-n3 {
  margin-bottom: -3px;
}

/* src/css/components/forms.css */
.input, .textarea {
  background-color: var(--color-typography-1);
  border-style: solid;
  border-width: 1px;
  border-color: var(--color-bg-3);
  color: var(--color-typography-2);
  border-radius: 2px;
  width: 100%;
  max-width: 100%;
}

:is(.input, .textarea)::placeholder {
  color: var(--color-typography-3);
}

:is(.input, .textarea)::placeholder {
  color: var(--color-typography-3);
}

:is(.input, .textarea):-ms-input-placeholder {
  color: var(--color-typography-3);
}

:is(.input, .textarea):hover {
  border-color: color-mix(in oklab, var(--color-bg-3) 95%, var(--darken) 5%);
}

:is(.input, .textarea):active {
  outline: none;
  border-color: var(--color-bg-3);
}

:is(.input, .textarea):focus {
  outline: none;
  border-color: var(--color-bg-3);
}

:is(.input, .textarea)[disabled] {
  cursor: not-allowed;
  background-color: var(--color-bg-2);
  border-color: var(--color-bg-2);
}

.input {
  -moz-appearance: none;
  -webkit-appearance: none;
  font-size: var(--font-size-eta);
  letter-spacing: var(--kerning-eta);
  box-shadow: none;
  height: 48px;
  padding: 13px 16px;
  line-height: 20px;
}

.input .inline-input {
  display: inline;
  width: auto;
}

.textarea {
  display: block;
  resize: vertical;
  min-width: 100%;
}

.textarea .inline-textarea {
  display: inline;
  width: auto;
}

.field-grouped > .control:not(:last-child) {
  margin-bottom: 8px;
}

@media (min-width: 640px) {
  .field-grouped {
    display: flex;
  }

  .field-grouped > .control {
    flex-shrink: 0;
  }

  .field-grouped > .control.control-expanded {
    flex-grow: 1;
    flex-shrink: 1;
  }

  .field-grouped > .control:not(:last-child) {
    margin-bottom: 0;
    margin-right: 8px;
  }
}

/* src/css/components/buttons.css */
.button {
  display: inline-flex;
  font-size: var(--font-size-theta);
  letter-spacing: var(--kerning-theta);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  background-color: var(--x-button-secondary-background, var(--color-bg-3));
  color: var(--x-button-secondary-color, var(--color-typography-1));
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  border: none;
  border-radius: 2px;
  justify-content: center;
  height: 48px;
  padding: 16px 32px;
  line-height: 16px;
  text-decoration: none !important;
}

.button:not(:disabled):hover {
  background: var(--x-button-secondary-hover-background, color-mix(in oklab, var(--color-bg-3) 99%, var(--lighten) 2%));
}

.button:disabled {
  cursor: not-allowed;
}

.button:active {
  outline: 0;
}

.button:before {
  border-radius: 2px;
}

.button-sm {
  height: 32px;
  padding: 8px 24px;
}

.button-primary {
  color: var(--x-button-color, #fff);
  background-color: var(--x-button-background);
  background-image: linear-gradient(65deg, var(--color-primary-1) 0%, var(--color-primary-2) 100%);
}

.button-primary:not(:disabled):hover {
  --color-primary-1: var(--x-button-hover-background, var(--x-button-background));
  --color-primary-2: oklch(from var(--color-primary-1) calc(l + .1) c calc(h - 10));
  background-color: color-mix(in oklch, var(--color-primary-1) 94%, white 6%);
  background-image: linear-gradient(65deg, color-mix(in oklch, var(--color-primary-1) 94%, white 6%) 0%, color-mix(in oklch, var(--color-primary-2) 94%, white 6%) 100%);
}

.button-block {
  display: block;
  width: 100%;
}

@media (max-width: 639px) {
  .button-wide-mobile {
    width: 100%;
    max-width: 280px;
  }
}

/* src/css/components/changelog-carousel.css */
.changelog-carousel {
  --sl-color-primary-600: var(--color-primary-1);
}

.changelog-carousel .carousel-container {
  margin: 0 auto;
}

.changelog-carousel sl-badge {
  position: relative;
  top: -.1em;
}

.changelog-carousel .changelog-card {
  overflow: hidden;
  position: relative;
  flex: 1;
  width: 100%;
  height: 100%;
  margin: 0;
}

.changelog-carousel .changelog-card-full {
  margin-bottom: 4rem;
}

.changelog-carousel .changelog-card-landing {
  border: 1px solid var(--color-bg-4);
  aspect-ratio: 16 / 9;
  border-radius: 3px;
  padding: 2rem;
}

.changelog-carousel .changelog-card-landing:after {
  content: "";
  position: absolute;
  background: linear-gradient(to bottom, transparent, var(--color-bg-2));
  pointer-events: none;
  height: 160px;
  bottom: 0;
  left: 0;
  right: 0;
}

.changelog-carousel sl-carousel sl-carousel-item:not(:first-of-type) {
  display: none;
}

.changelog-carousel sl-carousel[aria-label] sl-carousel-item:not(:first-of-type) {
  display: flex;
}

.changelog-carousel .changelog-header {
  margin-bottom: 1rem;
}

.changelog-carousel .changelog-header .changelog-version {
  display: flex;
  justify-content: space-between;
  margin: 0;
  font-weight: 600;
}

.changelog-carousel .changelog-content li {
  margin-bottom: .5rem;
  line-height: 1.4;
}

.changelog-carousel .changelog-content p {
  margin-bottom: .5rem;
}

/* src/css/components/pricing-toggle.css */
.pricing-toggle-wrapper {
  position: relative;
  z-index: 1;
  display: inline-flex;
  background: var(--color-bg-2);
  border: 1px solid var(--color-bg-4);
  border-radius: 50px;
  align-items:  center;
  gap: 16px;
  padding: 4px;
}

.pricing-toggle-label {
  color: var(--color-typography-2);
  cursor: pointer;
  user-select: none;
  border-radius: 46px;
  padding: 8px 16px;
  transition: all .2s;
  font-size: 14px;
  font-weight: 500;
}

.pricing-toggle-label.active {
  color: var(--color-typography-1);
  background: var(--color-primary-1);
}

.pricing-toggle {
  position: relative;
  display: inline-block;
  cursor: pointer;
  width: 48px;
  height: 24px;
}

.pricing-toggle-input {
  opacity: 0;
  width: 0;
  height: 0;
}

.pricing-toggle-slider {
  position: absolute;
  cursor: pointer;
  background-color: var(--color-bg-4);
  border-radius: 24px;
  transition: all .2s;
  inset: 0;
}

.pricing-toggle-slider:before {
  position: absolute;
  content: "";
  background-color: #fff;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  transition: all .2s;
  bottom: 3px;
  left: 3px;
  box-shadow: 0 2px 4px #0003;
}

.pricing-toggle-input:checked + .pricing-toggle-slider {
  background-color: var(--color-primary-1);
}

.pricing-toggle-input:checked + .pricing-toggle-slider:before {
  transform: translateX(24px);
}

.pricing .one-time-price {
  display: unset;
}

.pricing .monthly-price {
  display: none;
}

.pricing .pricing-toggle-one-time {
  color: var(--color-typography-1);
  background: var(--color-bg-1);
}

.pricing .pricing-toggle-monthly {
  color: var(--color-typography-2);
  background: none;
}

.pricing .pricing-table {
  transition: all .3s;
}

.pricing .pricing-table > .pricing-table-inner {
  transition: all .3s;
}

.pricing {
  --dir: 1;
}

.pricing:has(.back-card + .front-card) {
  --dir: -1;
}

.pricing .pricing-table.front-card {
  z-index: 2;
}

.pricing:has(.pricing-toggle-input:checked) .pricing-toggle-monthly {
  color: var(--color-typography-1);
  background: var(--color-bg-1);
}

.pricing:has(.pricing-toggle-input:checked) .pricing-toggle-one-time {
  color: var(--color-typography-2);
  background: none;
}

.pricing:has(.pricing-toggle-input:checked) .pricing-table.front-card .one-time-price {
  display: none;
}

.pricing:has(.pricing-toggle-input:checked) .pricing-table.front-card .monthly-price {
  display: unset;
}

.pricing:has(.pricing-toggle-input:checked) .pricing-table.back-card .one-time-price {
  display: unset;
}

.pricing:has(.pricing-toggle-input:checked) .pricing-table.back-card .monthly-price {
  display: none;
}

@media (min-width: 849px) {
  .pricing:has(.pricing-toggle-input:checked) .pricing-table.front-card {
    transform: translateX(calc(var(--dir) * (50% + 16px * 2)));
  }

  .pricing:has(.pricing-toggle-input:checked) .pricing-table.back-card {
    pointer-events: none;
    user-select: none;
    transform: translateX(calc(var(--dir) * (-50% - 16px * 2))) scale(.9);
  }

  .pricing:has(.pricing-toggle-input:checked) .pricing-table.back-card > .pricing-table-inner {
    filter: blur(5px);
  }
}

/* src/css/layout/header.css */
.site-header {
  position: sticky;
  z-index: 3;
  box-shadow: 0 2px 3px color-mix(in srgb, var(--color-bg-1) 92%, #222);
  background: var(--x-background);
  height: 55px;
  padding: 10px 0;
  top: 0;
}

@media print {
  .site-header {
    display: none;
  }
}

.site-header-inner {
  display: flex;
  justify-content: space-between;
  align-items:  center;
}

@media (max-width: 1023px) {
  .header-links {
    display: none;
  }
}

@media (min-width: 640px) {
  .hero-bg:before {
    content: "";
    z-index: 0;
    position: absolute;
    background: var(--color-bg-3);
    background: linear-gradient(80deg, rgb(from var(--color-bg-3) r g b / 50%) 0%, rgb(from var(--color-bg-3) r g b / 0%) 100%);
    -webkit-transform-origin: 0;
    transform-origin: 0;
    width: 100%;
    height: 700px;
    top: 0;
    left: 0;
    transform: translateY(-115px);
  }
}

.header-logo-image {
  filter: hue-rotate(calc(var(--x-primary-h, 209deg)  - 209deg)) saturate(calc(1 + (var(--x-primary-s, .98)  - .98) * .85)) brightness(calc(1 + (var(--x-primary-l, .43)  - .43) * .65)) contrast(calc(.8 + .2 / .98 * var(--x-primary-s, .98)));
}

/* src/css/layout/hero.css */
.hero {
  text-align: center;
  margin-top: 24px;
  margin-bottom: 48px;
  padding-top: 48px;
  padding-bottom: 48px;
}

.hero-copy {
  position: relative;
  z-index: 1;
}

.hero-paragraph {
  text-wrap: balance;
}

.hero-cta {
  margin-bottom: 36px;
}

.hero-figure {
  position: relative;
}

.hero-figure svg {
  width: 100%;
  height: auto;
}

.hero-figure:before {
  content: "";
  position: absolute;
  background-repeat: no-repeat;
  background-size: 100%;
}

.has-animations :is(.hero-figure:before) {
  opacity: 0;
  transition: opacity 2s;
}

.anime-ready :is(.has-animations :is(.hero-figure:before)) {
  opacity: 1;
}

.hero-figure:after {
  content: "";
  position: absolute;
  background-repeat: no-repeat;
  background-size: 100%;
}

.has-animations :is(.hero-figure:after) {
  opacity: 0;
  transition: opacity 2s;
}

.anime-ready :is(.has-animations :is(.hero-figure:after)) {
  opacity: 1;
}

.hero-figure:before {
  width: 152.84%;
  height: 178.78%;
  top: -57.8%;
  left: -1.3%;
}

.hero-figure:after {
  width: 57.2%;
  height: 87.88%;
  top: -35.6%;
  left: 99.6%;
}

.hero-figure-box {
  position: absolute;
  will-change: transform;
  top: 0;
}

.hero-figure-box-01, .hero-figure-box-02, .hero-figure-box-03, .hero-figure-box-04, .hero-figure-box-08, .hero-figure-box-09 {
  overflow: hidden;
}

:is(.hero-figure-box-01, .hero-figure-box-02, .hero-figure-box-03, .hero-figure-box-04, .hero-figure-box-08, .hero-figure-box-09):before {
  content: "";
  position: absolute;
  transform-origin: 100% 100%;
  inset: 0;
}

.hero-figure-box-01 {
  background: linear-gradient(to left top, var(--color-primary-2), rgba(from var(--color-primary-2) r g b / 0));
  width: 28.03%;
  height: 37.37%;
  top: 41.9%;
  left: 103.2%;
  transform: rotateZ(45deg);
}

.hero-figure-box-01:before {
  background: linear-gradient(to left, var(--color-bg-1) 0%, rgb(from var(--color-bg-1) r g b / 0%) 60%);
  transform: rotateZ(45deg)scale(1.5);
}

.hero-figure-box-02 {
  background: linear-gradient(to left top, var(--color-primary-1), rgb(from var(--color-primary-1) r g b / 0));
  width: 37.87%;
  height: 50.5%;
  top: 64.1%;
  left: 61.3%;
  transform: rotateZ(-45deg);
}

.hero-figure-box-02:before {
  background: linear-gradient(to top, var(--color-bg-1) 0%, rgb(from var(--color-bg-1) r g b / 0%) 60%);
  transform: rotateZ(-45deg)scale(1.5);
}

.hero-figure-box-03 {
  background: linear-gradient(to left top, var(--color-primary-2), rgba(from var(--color-primary-2) r g b / 0));
  width: 56.81%;
  height: 75.75%;
  top: -56.8%;
  left: 87.7%;
}

.hero-figure-box-03:before {
  background: linear-gradient(to left, var(--color-bg-1) 0%, rgb(from var(--color-bg-1) r g b / 0%) 60%);
  transform: rotateZ(45deg)scale(1.5);
}

.hero-figure-box-04 {
  background: linear-gradient(to left top, var(--color-primary-1), rgb(from var(--color-primary-1) r g b / 0));
  width: 45.45%;
  height: 60.6%;
  top: -8%;
  left: 54.9%;
  transform: rotateZ(-135deg);
}

.hero-figure-box-04:before {
  background: linear-gradient(to top, rgb(from var(--color-typography-1) r g b / 24%) 0%, rgb(from var(--color-typography-1) r g b / 0%) 60%);
  transform: rotateZ(-45deg)scale(1.5);
}

.hero-figure-box-05, .hero-figure-box-06, .hero-figure-box-07 {
  background-color: var(--color-bg-3);
  box-shadow: -20px 32px 64px #00000040;
}

.hero-figure-box-05 {
  width: 90%;
  height: calc(90% - 2px);
  top: 0%;
  left: 0%;
  transform: perspective(500px)rotateY(-15deg)rotateX(8deg)rotateZ(-1deg);
}

.hero-figure-box-06 {
  width: 30.3%;
  height: 40.4%;
  top: 6.3%;
  left: 82.5%;
  transform: rotateZ(20deg);
}

.hero-figure-box-07 {
  width: 12.12%;
  height: 16.16%;
  top: 42.4%;
  left: 1.9%;
  transform: rotateZ(20deg);
}

.hero-figure-box-08 {
  background: var(--color-primary-1);
  width: 19.51%;
  height: 26.01%;
  top: 81.6%;
  left: 27.1%;
  transform: rotateZ(-22deg);
}

.hero-figure-box-08:before {
  background: linear-gradient(to left, rgb(from var(--color-typography-1) r g b / 0%) 0%, rgb(from var(--color-typography-1) r g b / 24%) 100%);
  transform: rotateZ(45deg)scale(1.5);
}

.hero-figure-box-09 {
  background: var(--color-primary-2);
  width: 6.63%;
  height: 8.83%;
  top: -17.9%;
  left: 42.6%;
  transform: rotateZ(-52deg);
}

.hero-figure-box-09:before {
  background: linear-gradient(to left, rgb(from var(--color-typography-1) r g b / 0%) 0%, rgb(from var(--color-typography-1) r g b / 48%) 100%);
  transform: rotateZ(45deg)scale(1.5);
}

.hero-figure-box-10 {
  background: rgba(from var(--color-primary-2) r g b / .32);
  width: 3.03%;
  height: 4.04%;
  top: 4.3%;
  left: -3.8%;
  transform: rotateZ(-50deg);
}

@media (max-width: 639px) {
  .hero-cta {
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
  }

  .hero-cta .button {
    display: flex;
  }

  .hero-cta .button + .button {
    margin-top: 16px;
  }

  .hero-figure:after, .hero-figure-box-03, .hero-figure-box-04, .hero-figure-box-09 {
    display: none;
  }
}

@media (min-width: 640px) {
  .hero {
    text-align: left;
    padding-top: 56px;
    padding-bottom: 88px;
  }

  .hero-inner {
    display: flex;
    justify-content: space-between;
    align-items:  center;
  }

  .hero-left {
    width: 552px;
    min-width: 552px;
    padding-right: 64px;
  }

  .hero-cta {
    margin: 0 0 24px;
  }

  .hero-cta .button {
    min-width: 170px;
  }

  .hero-cta .button:first-child {
    margin-right: 16px;
  }

  .hero-figure svg {
    width: auto;
  }
}

.hero-app {
  margin-bottom: 24px;
  padding-bottom: 64px;
}

.hero-app .hero-copy {
  text-align: center;
}

.hero-app .hero-title {
  margin-top: 16px;
}

/* src/css/layout/features.css */
.features-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  margin-left: -32px;
  margin-right: -32px;
}

.features-wrap:first-of-type {
  margin-top: -16px;
}

.features-wrap:last-of-type {
  margin-bottom: -16px;
}

.feature {
  flex-grow: 1;
  width: 380px;
  max-width: 380px;
  padding: 16px 32px;
}

.feature-inner {
  height: 100%;
}

.feature-inner p {
  hyphens: auto;
}

html[lang="de"] .feature-inner p {
  hyphenate-limit-chars: 15 7 7;
}

html[lang="en"] .feature-inner p {
  hyphenate-limit-chars: 9 4 4;
}

html[lang="pt-br"] .feature-inner p, html[lang="es"] .feature-inner p, html[lang="fr"] .feature-inner p {
  hyphenate-limit-chars: 12 6 5;
}

.feature-icon {
  display: flex;
  justify-content: center;
}

@media (min-width: 640px) {
  .features-wrap:first-of-type {
    margin-top: -24px;
  }

  .features-wrap:last-of-type {
    margin-bottom: -24px;
  }

  .feature {
    padding: 32px;
  }
}

/* src/css/layout/pricing.css */
#pricing {
  scroll-margin-top: calc(60px + 1rem);
  scroll-margin-bottom: 1rem;
}

.pricing-header {
  margin-bottom: 56px;
}

.pricing-tables-wrap {
  display: flex;
  position: relative;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.5rem;
}

.pricing-figure-box-01, .pricing-figure-box-02, .pricing-figure-box-03 {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  transform-origin: center;
  overflow: hidden;
}

:is(.pricing-figure-box-01, .pricing-figure-box-02, .pricing-figure-box-03):before {
  content: "";
  position: absolute;
  transform-origin: 100% 100%;
  inset: 0;
}

.pricing-figure-box-01 {
  background: linear-gradient(29deg, var(--color-primary-1) 0%, rgba(from var(--color-primary-2) r g b / 0) 80%);
  width: 300px;
  height: 300px;
  top: 85px;
  left: 205px;
  transform: rotate(61deg);
}

.pricing-figure-box-02 {
  background: rgba(from var(--color-primary-3) r g b / .72);
  width: 34px;
  height: 34px;
  top: 355px;
  left: 163px;
  transform: rotate(57deg);
}

.pricing-figure-box-03 {
  background: var(--color-primary-2);
  width: 40px;
  height: 40px;
  top: 270px;
  left: 610px;
  transform: rotate(130deg);
}

.pricing-figure-box-03:before {
  background: linear-gradient(to left, rgb(from var(--color-typography-1) r g b / 0%) 0%, rgb(from var(--color-typography-1) r g b / 48%) 100%);
  transform: rotateZ(45deg)scale(1.5);
}

.pricing-table {
  position: relative;
  z-index: 1;
  flex-grow: 1;
  width: 368px;
  max-width: 425px;
}

.pricing-table-header, .pricing-table-features li:not(:last-child) {
  border-bottom: 1px solid rgb(from var(--color-typography-2) r g b / 24%);
}

.pricing-table-inner {
  position: relative;
  display: flex;
  background: rgb(from var(--color-bg-4) r g b / 76%);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  flex-wrap: wrap;
  height: 100%;
  padding: 24px;
}

.pricing-table-inner > * {
  position: relative;
  width: 100%;
}

.pricing-table-inner:before {
  content: "";
  position: absolute;
  box-shadow: 0 24px 48px color-mix(in srgb, var(--color-bg-1) 76%, #222);
  inset: 0;
}

.pricing-table-price {
  font-family: var(--font-family-heading);
}

.pricing-table-price del {
  -webkit-filter: blur(1.5px);
  filter: blur(1.5px);
}

.pricing-table-price-currency {
  color: var(--color-typography-2);
}

.pricing-table-features-title {
  color: var(--color-typography-1);
  font-weight: var(--font-weight-bold);
}

.pricing-table-features li {
  display: flex;
  align-items:  center;
  padding: 14px 0;
}

.pricing-table-features li:before {
  content: "";
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTUuNiA2LjRMMS42IDQgMCA1LjYgNS42IDEyIDE2IDEuNiAxNC40IDB6IiBmaWxsPSIjMDJDQkIxIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=");
  background-repeat: no-repeat;
  width: 16px;
  height: 12px;
  margin-right: 16px;
}

@media (max-height: 800px) {
  .pricing-table-features li {
    padding: 10px 0;
  }
}

.pricing-table-cta {
  display: flex;
  align-self:  flex-end;
}

@media (min-width: 640px) {
  .section-paragraph {
    padding-left: 90px;
    padding-right: 90px;
  }

  .pricing-header {
    margin-bottom: 64px;
  }
}

/* src/css/layout/cta.css */
.cta {
  text-align: center;
}

.cta .section-inner {
  padding: 48px 16px;
}

.cta .cta-title {
  text-wrap: balance;
  margin-bottom: 40px;
}

.cta-inner {
  position: relative;
  background: var(--color-bg-1);
  overflow: hidden;
}

.cta-inner > * {
  position: relative;
}

.cta-inner a {
  text-decoration: none;
  font-style: italic;
}

.cta-inner a:hover {
  text-decoration: underline;
}

@media (min-width: 640px) {
  .cta {
    text-align: left;
  }

  .cta .section-inner {
    padding: 64px 32px;
  }

  .cta .cta-title {
    margin-bottom: 0;
    padding-right: 24px;
  }

  .cta-inner-x {
    display: flex;
    justify-content: space-between;
    align-items:  center;
  }
}

/* src/css/layout/main.css */
.is-boxed {
  background: var(--color-bg-3);
}

.body-wrap {
  background: var(--color-bg-2);
  overflow: clip;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  min-height: 100dvh;
}

.boxed-container {
  box-shadow: 0 24px 48px color-mix(in srgb, var(--color-bg-1) 76%, #222);
  mix-blend-mode: normal;
  max-width: 1440px;
  margin: 0 auto;
}

main {
  flex: 1 0 auto;
}

.section-inner {
  position: relative;
  margin-top: 92px;
  margin-bottom: 92px;
}

/* src/css/variables.css */
:root {
  --x-font-family: system-ui;
  --x-font-family-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Mono", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Consolas", "Courier New", monospace;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 700;
  --font-weight-bold: 900;
  --breakpoint-small: 480px;
  --breakpoint-medium: 640px;
  --breakpoint-large: 1024px;
  --breakpoint-xlarge: 1280px;
  --breakpoint-xxlarge: 1440px;
  --content-padding-mobile: 16px;
  --content-padding-desktop: 24px;
  --container-width: 1120px;
  --container-width-sm: 800px;
  --font-size-alpha: 44px;
  --font-size-beta: 38px;
  --font-size-gamma: 32px;
  --font-size-delta: 24px;
  --font-size-epsilon: 20px;
  --font-size-zeta: 18px;
  --font-size-eta: 16px;
  --font-size-theta: 14px;
  --line-height-alpha: 54px;
  --line-height-beta: 48px;
  --line-height-gamma: 42px;
  --line-height-delta: 34px;
  --line-height-epsilon: 30px;
  --line-height-zeta: 28px;
  --line-height-eta: 24px;
  --line-height-theta: 22px;
  --kerning-alpha: 0px;
  --kerning-beta: 0px;
  --kerning-gamma: 0px;
  --kerning-delta: 0px;
  --kerning-epsilon: -.1px;
  --kerning-zeta: -.1px;
  --kerning-eta: -.1px;
  --kerning-theta: 0px;
  --print-font-size-1: 32pt;
  --print-font-size-2: 22pt;
  --print-font-size-3: 16pt;
  --print-font-size-4: 12pt;
  --print-font-size-5: 12pt;
  --print-font-size-6: 10pt;
  --print-font-size-7: 8pt;
  --print-font-size-8: 8pt;
  --print-line-height-1: 42pt;
  --print-line-height-2: 30pt;
  --print-line-height-3: 26pt;
  --print-line-height-4: 18pt;
  --print-line-height-5: 18pt;
  --print-line-height-6: 16pt;
  --print-line-height-7: 14pt;
  --print-line-height-8: 14pt;
  --print-kerning-1: 0pt;
  --print-kerning-2: 0pt;
  --print-kerning-3: 0pt;
  --print-kerning-4: 0pt;
  --print-kerning-5: 0pt;
  --print-kerning-6: 0pt;
  --print-kerning-7: 0pt;
  --print-kerning-8: 0pt;
}

body {
  --x-color: #fff;
  --x-background: #1d2026;
  --x-button-color: #fff;
  --x-button-background: #0270d7;
  --darken: black;
  --lighten: white;
}

@media (prefers-color-scheme: light) {
  body:not(.dark) {
    --x-color: #000;
    --x-background: #fff;
    --darken: #909090;
    --lighten: #484848;
    -webkit-font-smoothing: auto;
  }
}

body.light {
  --x-color: #000;
  --x-background: #fff;
  --darken: #909090;
  --lighten: #484848;
  -webkit-font-smoothing: auto;
}

body {
  --color-typography-1: var(--x-color, #fff);
  --color-typography-2: color-mix(in oklab, color-mix(in oklab, var(--x-color) 55%, var(--x-background)) 100%, var(--color-primary-1) 12.5%);
  --color-typography-3: color-mix(in oklab, color-mix(in oklab, var(--x-color) 75%, var(--x-background)) 100%, var(--color-primary-1) 12.5%);
  --color-bg-1: color-mix(in oklab, var(--x-background) 85%, var(--darken));
  --color-bg-2: var(--x-background);
  --color-bg-3: color-mix(in oklab, var(--x-background) 95%, var(--lighten));
  --color-bg-4: color-mix(in oklab, var(--x-background) 90%, var(--lighten));
  --color-primary-1: var(--x-button-background, #0270d7);
  --color-primary-2: oklch(from var(--color-primary-1) calc(l + .1) c calc(h - 10));
  --color-primary-3: oklch(from var(--color-primary-1) calc(l - .1) c calc(h + 10));
  --font-family-base: var(--x-font-family);
  --font-family-heading: var(--x-font-family);
  --font-family-code: var(--x-font-family-mono);
  --font-family-pre: var(--x-font-family-mono);
}

/* src/css/layout/footer.css */
.site-footer {
  font-size: var(--font-size-theta);
  line-height: var(--line-height-theta);
  letter-spacing: var(--kerning-theta);
}

.site-footer a {
  color: var(--color-typography-2);
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
}

.site-footer a:active {
  text-decoration: underline;
}

@media print {
  .site-footer {
    display: none;
  }
}

ol > li {
  margin-bottom: 1rem;
}

.site-footer-inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.site-footer-inner:last-of-type {
  padding-bottom: 48px;
}

.footer-brand, .footer-social-links, .footer-copyright {
  display: inline-flex;
  flex: none;
  justify-content: center;
  width: 100%;
}

.footer-links-wrapper {
  text-align: right;
}

.footer-brand, .footer-links-wrapper, .footer-social-links {
  margin-bottom: 24px;
}

.footer-social-links {
  gap: 16px;
}

.footer-social-links li {
  display: inline-flex;
}

.footer-social-links li a {
  padding: 8px;
}

.footer-links {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 24px;
}

.site-footer-inner {
  margin-top: 32px;
}

@media (min-width: 640px) {
  .site-footer {
    margin-top: 20px;
  }

  .site-footer-inner {
    justify-content: space-between;
    column-gap: 24px;
  }

  .site-footer-inner:last-of-type {
    padding-bottom: 128px;
  }

  .site-footer-inner:first-of-type {
    padding-top: 64px;
  }

  .footer-brand, .footer-links-wrapper, .footer-social-links, .footer-copyright {
    flex: calc(50% - 12px);
  }

  .footer-brand, .footer-copyright {
    justify-content: flex-start;
  }

  .footer-links, .footer-social-links {
    justify-content: flex-end;
  }

  :is(.footer-links, .footer-social-links) svg {
    filter: hue-rotate(calc(var(--x-primary-h, 209deg)  - 209deg)) saturate(calc(1 + (var(--x-primary-s, .98)  - .98) * .85)) brightness(calc(1 + (var(--x-primary-l, .43)  - .43) * .65)) contrast(calc(.8 + .2 / .98 * var(--x-primary-s, .98)));
  }

  .footer-links-wrapper {
    order: 1;
    margin-bottom: 0;
  }
}

/* src/css/layout/animated-footer.css */
.animated-text-wrapper {
  overflow: hidden;
  position: relative;
  border-top: 1px solid var(--color-bg-4);
  border-bottom: 1px solid var(--color-bg-4);
  width: 100%;
}

.animated-text-link {
  display: block;
  text-decoration: none;
  color: inherit;
  width: 100%;
}

.animated-text-link .animated-text {
  display: block;
  letter-spacing: -.02em;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  font-size: clamp(1rem, 10vw, 6.25rem);
  font-weight: 700;
  line-height: 1;
}

.animated-text-link .animated-text span {
  display: inline-block;
  will-change: transform;
  transition: transform .25s cubic-bezier(.4,0,.2,1);
}

.animated-text-link .animated-text .text-original {
  width: 100%;
  height: 100%;
  padding: 1.5rem 0;
}

.animated-text-link .animated-text .text-hover {
  width: 100%;
  height: 100%;
  padding: 1.5rem 0;
}

.animated-text-link .animated-text .text-original {
  transform: translateY(0);
}

.animated-text-link .animated-text .text-hover {
  position: absolute;
  font-size: 1.25em;
  line-height: 1.5em;
  top: 0;
  left: 0;
  transform: translateY(100%);
}

.animated-text-link:hover .animated-text .text-original {
  transform: translateY(-100%);
}

.animated-text-link:hover .animated-text .text-hover {
  transform: translateY(0);
}

body.polar-no-scroll .animated-text-link .animated-text .text-original {
  transform: translateY(-100%);
}

body.polar-no-scroll .animated-text-link .animated-text .text-hover {
  transform: translateY(0);
}

/* src/css/layout/cards.css */
.vscode-only {
  display: none;
}

.vscode .vscode-only {
  display: unset;
}

.vscode .web-only {
  display: none;
}

.proof-inner {
  margin-top: 64px;
  margin-bottom: 64px;
  padding-top: 0;
  padding-bottom: 0;
}

.cards-stack {
  --card-margin: 64px;
  --card-top-offset: 1em;
  --outline-width: 0px;
  padding: 0;
  padding-bottom: calc((var(--num-cards)  - 1) * var(--card-top-offset));
  list-style: none;
  outline: calc(var(--outline-width) * 10) solid hotpink;
  display: grid;
  gap: var(--card-margin);
  grid-template-columns: 100%;
  grid-template-rows: repeat(var(--num-cards), 1fr);
  margin-top: 88px;
}

@media (max-height: 800px) {
  .cards-stack {
    --card-margin: 32px;
    grid-template-rows: repeat(var(--num-cards), auto);
  }
}

#cards {
  --card-margin: 64px;
  --card-top-offset: 1em;
  --outline-width: 0px;
  padding: 0;
  padding-bottom: calc((var(--num-cards)  - 1) * var(--card-top-offset));
  list-style: none;
  outline: calc(var(--outline-width) * 10) solid hotpink;
  display: grid;
  gap: var(--card-margin);
  grid-template-columns: 100%;
  grid-template-rows: repeat(var(--num-cards), 1fr);
  margin-top: 88px;
}

@media (max-height: 800px) {
  #cards {
    --card-margin: 32px;
    grid-template-rows: repeat(var(--num-cards), auto);
  }
}

#root {
  background: var(--color-bg-3);
  aspect-ratio: 1160 / 600;
}

@media (max-aspect-ratio: 1) {
  #root {
    aspect-ratio: unset;
    height: 80vh;
  }
}

@media (min-width: 1400px) {
  .cards {
    margin-left: -2rem;
    margin-right: -2rem;
  }
}

.card {
  outline: var(--outline-width) solid lime;
}

.card__content {
  box-shadow: 0 24px 48px color-mix(in srgb, var(--color-bg-1) 76%, #222);
  background: var(--color-bg-3);
  color: var(--color-typography-1);
  display: grid;
  grid-template-areas: "text img";
  grid-template-columns: 1fr 2fr;
  grid-template-rows: 100%;
  outline: var(--outline-width) solid blue;
  border-radius: .25rem;
  align-items: stretch;
}

@media (max-width: 768px) {
  .card__content {
    grid-template-columns: 100%;
    grid-template-rows: auto 1fr;
    grid-template-areas: "img" "text";
  }
}

.cards-stack--text-right .card__content {
  grid-template-areas: "img text";
  grid-template-columns: 2fr 1fr;
}

@media (max-width: 768px) {
  .cards-stack--text-right .card__content {
    grid-template-columns: 100%;
    grid-template-rows: auto 1fr;
    grid-template-areas: "img" "text";
  }
}

.card__content > div:not(.card__header) {
  grid-area: text;
  text-align: left;
  overflow: hidden;
  overflow: clip;
  display: grid;
  place-self:  center;
  place-items:  start;
  width: 80%;
  padding-top: 12px;
  padding-bottom: 12px;
}

.card__content > div:not(.card__header) > h3 {
  margin-top: 12px;
}

@media (max-width: 426px) {
  .card__content > div:not(.card__header) > h3 {
    display: none;
  }
}

@media (min-width: 640px) {
  .card__content > div:not(.card__header) > h3 {
    display: none;
  }
}

@media (min-width: 1024px) {
  .card__content > div:not(.card__header) > h3 {
    display: inherit;
  }
}

.card__content > figure {
  grid-area: img;
  overflow: hidden;
  overflow: clip;
  aspect-ratio: 4 / 3;
  position: relative;
  border-top-right-radius: .25rem;
  border-bottom-right-radius: .25rem;
  width: 100%;
  margin: 0;
}

.card__content > figure > img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.card__content > figure > video {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

@media (min-width: 768px) {
  .card__content > figure {
    border-left: 1px solid var(--color-bg-4);
  }
}

@media (max-width: 768px) {
  .card__content > figure {
    border-top-left-radius: .25rem;
    border-bottom-right-radius: 0;
  }
}

.cards-stack--text-right .card__content > figure {
  border-radius: .25rem 0 0 .25rem;
}

@media (min-width: 768px) {
  .cards-stack--text-right .card__content > figure {
    border-left: none;
    border-right: 1px solid var(--color-bg-4);
  }
}

@media (max-width: 768px) {
  .cards-stack--text-right .card__content > figure {
    border-top-left-radius: .25rem;
    border-bottom-right-radius: 0;
  }
}

.cards-stack, #cards {
  --card-top: calc(60px + 16px + var(--card-top-offset));
}

.card {
  --index0: calc(var(--index)  - 1);
  --reverse-index: calc(var(--num-cards)  - var(--index0));
  --reverse-index0: calc(var(--reverse-index)  - 1);
  --card-base-y: calc(var(--index0) * var(--card-top-offset));
  --card-hover-y: 0px;
  position: sticky;
  top: var(--card-top);
  transform: translateY(calc(var(--card-base-y)  - var(--card-hover-y)));
  transition: transform .5s;
}

@media (max-height: 800px) {
  .card {
    position: static;
  }
}

.card, .spy {
  --index: attr(data-index);
  grid-row: var(--index);
  grid-column: 1;
  scroll-margin-top: var(--card-top);
}

.card__content {
  transform-origin: 50% 0%;
  will-change: transform;
}

a.card__header {
  position: absolute;
  height: calc((var(--card-top-offset)  + .125em) * 1 / (1.1 - .1 * var(--num-cards)));
  cursor: pointer;
  background: linear-gradient(to bottom, rgb(from var(--color-bg-4) r g b / 50%), transparent);
  z-index: 1;
  border-top-left-radius: .25rem;
  border-top-right-radius: .25rem;
  top: 0;
  left: 0;
  right: 0;
}

@media (max-height: 800px) {
  a.card__header {
    display: none;
  }
}

.cards-stack--text-right a.card__header {
  border-top-left-radius: 0;
  border-top-right-radius: .25rem;
}

.card:has(.card__header:hover) {
  --card-hover-y: calc(.125em * 1 / (1.1 - .1 * var(--reverse-index)));
  transition: transform .125s;
}

@supports (view-timeline-name: --cards-element-scrolls-in-body) {
  @keyframes scale {
    to {
      transform: scale(calc(1.1 - .1 * var(--reverse-index)));
    }
  }

  .cards-stack {
    view-timeline-name: --cards-element-scrolls-in-body;
  }

  .card__content {
    animation: linear scale forwards;
    animation-timeline: --cards-element-scrolls-in-body;
    animation-range: exit-crossing calc(var(--index0) / var(--num-cards) * 100%) exit-crossing calc((var(--index)) / var(--num-cards) * 100%);
  }
}

/* src/css/web-app.css */
#root {
  overflow: hidden;
  overflow: clip;
  border: 1px solid var(--color-bg-4);
}

@media (display-mode: window-controls-overlay) or (display-mode: standalone) {
  .container, .hero, .site-header, .site-footer {
    display: contents !important;
  }

  .container > :not(#root) {
    display: none !important;
  }

  #root {
    width: 100vw;
    height: 100vh;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 0;
  }
}

.app .container {
  display: contents !important;
}

.app .hero {
  display: contents !important;
}

.app .site-header {
  display: contents !important;
}

.app .site-footer {
  display: contents !important;
}

.app .container > :not(#root) {
  display: none !important;
}

.app #root {
  width: 100%;
  height: 100vh;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
}

body:not(.app) .scroller {
  overscroll-behavior: initial !important;
}

:root {
  scrollbar-gutter: stable;
}

:root:has(.app) {
  scrollbar-gutter: auto;
  overflow: clip;
}

/* src/css/style.css */
.with-divider {
  position: relative;
}

div:has( > .section-title) {
  position: relative;
}

.with-divider:after {
  content: "";
  position: absolute;
  background: var(--color-bg-4);
  border-radius: 1px;
  width: min(8vw, 80px);
  height: 2px;
  margin: auto;
  bottom: -24px;
  left: 0;
  right: 0;
}

div:has( > .section-title):after {
  content: "";
  position: absolute;
  background: var(--color-bg-4);
  border-radius: 1px;
  width: min(8vw, 80px);
  height: 2px;
  margin: auto;
  bottom: -24px;
  left: 0;
  right: 0;
}

#logo-graveyard {
  margin-top: -82px;
}

.logo-graveyard {
  user-select: none;
  filter: grayscale(1);
  flex-wrap: wrap;
  justify-content: center;
  align-items:  center;
  gap: 24px;
}

@media (prefers-color-scheme: dark) {
  .logo-graveyard {
    filter: grayscale(1) invert(1);
  }
}

.logo-graveyard > img {
  position: relative;
  top: -3px;
}

.avatar-stack {
  justify-content: center;
  align-items:  center;
  padding-left: 16px;
}

.avatar-stack-item {
  object-fit: cover;
  border: 1px solid var(--color-bg-4);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  margin-left: -16px;
}

details.faq {
  border: 1px solid var(--color-bg-4);
  border-radius: 3px;
  margin-bottom: 16px;
  padding: 16px;
}

details.faq summary {
  font-weight: bold;
}

@media (pointer: coarse) or (max-width: 960px) {
  sl-carousel::part(navigation) {
    display: none;
  }
}