@charset "UTF-8";
:root {
  --container-width: 62.5rem;
  --section-spacing: 3.5em;
  --container-spacing: 2.5em;
  --box-spacing: 2em;
  --primary-spacing: 1em; }

html {
  scroll-padding-top: 100px; }

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh; }

.chroma .lntable pre, .chroma .lntable pre code {
  padding: 0;
  margin: 0; }

.chroma .lntable pre {
  border: 0; }

code {
  padding: 0.2em;
  margin: 0;
  background-color: var(--clr-neutral-100);
  border-radius: 3px;
  font-family: 'JetBrainsMono', monospace;
  font-size: 80%;
  word-break: break-word; }

pre code {
  display: block;
  padding: 1em;
  line-height: 2;
  overflow-x: auto; }

pre {
  white-space: pre;
  -webkit-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
  position: relative;
  border-radius: 3px; }

.main-inner {
  margin-block: var(--container-spacing); }
  .main-inner :is(.article, .download, .community, .development) > p {
    margin: 1.5em 0; }
  .main-inner :is(.article, .download, .community, .development) li {
    margin: 1em 0; }
  .main-inner :is(.article, .download, .community, .development):is(h2, h3, h4) {
    margin-top: 3rem; }

/* barlow-latin-100 */
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: local(""), url("../fonts/barlow-latin-100.woff") format("woff"); }

/* barlow-latin-100 */
@font-face {
  font-family: "Barlow";
  font-style: italic;
  font-weight: 100;
  font-display: swap;
  src: local(""), url("../fonts/barlow-latin-100italic.woff") format("woff"); }

/* barlow-latin-200 */
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: local(""), url("../fonts/barlow-latin-200.woff") format("woff"); }

/* barlow-latin-200 */
@font-face {
  font-family: "Barlow";
  font-style: italic;
  font-weight: 200;
  font-display: swap;
  src: local(""), url("../fonts/barlow-latin-200italic.woff") format("woff"); }

/* barlow-latin-300 */
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local(""), url("../fonts/barlow-latin-300.woff") format("woff"); }

/* barlow-latin-300 */
@font-face {
  font-family: "Barlow";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: local(""), url("../fonts/barlow-latin-300italic.woff") format("woff"); }

/* barlow-latin-400 */
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local(""), url("../fonts/barlow-latin-400.woff") format("woff"); }

/* barlow-latin-400 */
@font-face {
  font-family: "Barlow";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: local(""), url("../fonts/barlow-latin-400italic.woff") format("woff"); }

/* barlow-latin-500 */
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local(""), url("../fonts/barlow-latin-500.woff") format("woff"); }

/* barlow-latin-500 */
@font-face {
  font-family: "Barlow";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: local(""), url("../fonts/barlow-latin-500italic.woff") format("woff"); }

/* barlow-latin-600 */
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local(""), url("../fonts/barlow-latin-600.woff") format("woff"); }

/* barlow-latin-600 */
@font-face {
  font-family: "Barlow";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: local(""), url("../fonts/barlow-latin-600italic.woff") format("woff"); }

/* barlow-latin-700 */
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local(""), url("../fonts/barlow-latin-700.woff") format("woff"); }

/* barlow-latin-700 */
@font-face {
  font-family: "Barlow";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: local(""), url("../fonts/barlow-latin-700italic.woff") format("woff"); }

/* barlow-latin-800 */
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: local(""), url("../fonts/barlow-latin-800.woff") format("woff"); }

/* barlow-latin-800 */
@font-face {
  font-family: "Barlow";
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: local(""), url("../fonts/barlow-latin-800italic.woff") format("woff"); }

/* barlow-latin-900 */
@font-face {
  font-family: "Barlow";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: local(""), url("../fonts/barlow-latin-900.woff") format("woff"); }

/* barlow-latin-900 */
@font-face {
  font-family: "Barlow";
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: local(""), url("../fonts/barlow-latin-900italic.woff") format("woff"); }

/* jetbrains-mono-500 */
@font-face {
  font-family: "JetbrainsMono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local(""), url("../fonts/jetbrains-mono-500.woff") format("woff"); }

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

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0; }

ul[role='list'],
ol[role='list'] {
  list-style: none; }

html:focus-within {
  scroll-behavior: smooth; }

body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5; }

a:not([class]) {
  text-decoration-skip-ink: auto; }

img,
picture {
  max-width: 100%;
  display: inline-block; }

input,
button,
textarea,
select {
  font: inherit;
  display: inline-block; }

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important; } }

:root {
  --clr-primary-100: #a0bfee;
  --clr-primary-200: #6396e3;
  --clr-primary-300: #3376db;
  --clr-primary-400: #2263c3;
  --clr-primary-500: #1c51a0;
  --clr-secondary-100: #ffccbd;
  --clr-secondary-200: #ffa98f;
  --clr-secondary-300: #ff8a66;
  --clr-secondary-400: #ff6e42;
  --clr-secondary-500: #ff5724;
  --clr-neutral-100: whitesmoke;
  --clr-neutral-200: #ededed;
  --clr-neutral-300: #e0e0e0;
  --clr-neutral-400: #bdbdbd;
  --clr-neutral-500: #858585;
  --clr-white: white;
  --clr-black: black;
  --clr-indigo: #293756;
  --clr-bluishGray: #f5fbff;
  --fs-100: 0.25rem;
  --fs-200: 0.55rem;
  --fs-300: 0.85rem;
  --fs-400: 1rem;
  --fs-500: 1.15rem;
  --fs-600: 1.65rem;
  --fs-700: 1.75rem;
  --fs-800: 2rem;
  --fs-900: 2.5rem; }
  @media only screen and (min-width: 40em) {
    :root {
      --fs-100: 0.55rem;
      --fs-200: 0.85rem;
      --fs-300: 1rem;
      --fs-400: 1.15rem;
      --fs-500: 1.45rem;
      --fs-600: 1.75rem;
      --fs-700: 2rem;
      --fs-800: 2.5rem;
      --fs-900: 3rem; } }
/* Background */
.chroma {
  background-color: #ffffff; }

/* Other */
/* Error */
.chroma .err {
  color: #a61717;
  background-color: #e3d2d2; }

/* LineTableTD */
.chroma .lntd {
  vertical-align: top;
  padding: 0;
  margin: 0;
  border: 0; }

/* LineTable */
.chroma .lntable {
  border-spacing: 0;
  padding: 0;
  margin: 0;
  border: 0;
  width: auto;
  overflow: auto;
  display: block; }

/* LineHighlight */
.chroma .hl {
  display: block;
  width: 100%;
  background-color: #ffffcc; }

/* LineNumbersTable */
.chroma .lnt {
  margin-right: 0.4em;
  padding: 0 0.4em 0 0.4em;
  color: #7f7f7f; }

/* LineNumbers */
.chroma .ln {
  margin-right: 0.4em;
  padding: 0 0.4em 0 0.4em;
  color: #7f7f7f; }

/* Keyword */
.chroma .k {
  color: #002D62;
  font-weight: 500; }

/* KeywordConstant */
.chroma .kc {
  color: #000000;
  font-weight: 500; }

/* KeywordDeclaration */
.chroma .kd {
  color: #000000;
  font-weight: 500; }

/* KeywordNamespace */
.chroma .kn {
  color: #000000;
  font-weight: 500; }

/* KeywordPseudo */
.chroma .kp {
  color: #000000;
  font-weight: 500; }

/* KeywordReserved */
.chroma .kr {
  color: #000000;
  font-weight: 500; }

/* KeywordType */
.chroma .kt {
  color: #445588;
  font-weight: 500; }

/* Name */
/* NameAttribute */
.chroma .na {
  color: #008080; }

/* NameBuiltin */
.chroma .nb {
  color: #0086b3; }

/* NameBuiltinPseudo */
.chroma .bp {
  color: #999999; }

/* NameClass */
.chroma .nc {
  color: #445588;
  font-weight: 500; }

/* NameConstant */
.chroma .no {
  color: #008080; }

/* NameDecorator */
.chroma .nd {
  color: #3c5d5d;
  font-weight: 500; }

/* NameEntity */
.chroma .ni {
  color: #800080; }

/* NameException */
.chroma .ne {
  color: #990000;
  font-weight: 500; }

/* NameFunction */
.chroma .nf {
  color: #990000;
  font-weight: 500; }

/* NameFunctionMagic */
/* NameLabel */
.chroma .nl {
  color: #990000;
  font-weight: 500; }

/* NameNamespace */
.chroma .nn {
  color: #555555; }

/* NameOther */
/* NameProperty */
/* NameTag */
.chroma .nt {
  color: #000080; }

/* NameVariable */
.chroma .nv {
  color: #008080; }

/* NameVariableClass */
.chroma .vc {
  color: #008080; }

/* NameVariableGlobal */
.chroma .vg {
  color: #008080; }

/* NameVariableInstance */
.chroma .vi {
  color: #008080; }

/* NameVariableMagic */
/* Literal */
/* LiteralDate */
/* LiteralString */
.chroma .s {
  color: #dd1144; }

/* LiteralStringAffix */
.chroma .sa {
  color: #dd1144; }

/* LiteralStringBacktick */
.chroma .sb {
  color: #dd1144; }

/* LiteralStringChar */
.chroma .sc {
  color: #dd1144; }

/* LiteralStringDelimiter */
.chroma .dl {
  color: #dd1144; }

/* LiteralStringDoc */
.chroma .sd {
  color: #dd1144; }

/* LiteralStringDouble */
.chroma .s2 {
  color: #dd1144; }

/* LiteralStringEscape */
.chroma .se {
  color: #dd1144; }

/* LiteralStringHeredoc */
.chroma .sh {
  color: #dd1144; }

/* LiteralStringInterpol */
.chroma .si {
  color: #dd1144; }

/* LiteralStringOther */
.chroma .sx {
  color: #dd1144; }

/* LiteralStringRegex */
.chroma .sr {
  color: #009926; }

/* LiteralStringSingle */
.chroma .s1 {
  color: #dd1144; }

/* LiteralStringSymbol */
.chroma .ss {
  color: #990073; }

/* LiteralNumber */
.chroma .m {
  color: #009999; }

/* LiteralNumberBin */
.chroma .mb {
  color: #009999; }

/* LiteralNumberFloat */
.chroma .mf {
  color: #009999; }

/* LiteralNumberHex */
.chroma .mh {
  color: #009999; }

/* LiteralNumberInteger */
.chroma .mi {
  color: #009999; }

/* LiteralNumberIntegerLong */
.chroma .il {
  color: #009999; }

/* LiteralNumberOct */
.chroma .mo {
  color: #009999; }

/* Operator */
.chroma .o {
  color: #000000;
  font-weight: 500; }

/* OperatorWord */
.chroma .ow {
  color: #000000;
  font-weight: 500; }

/* Punctuation */
/* Comment */
.chroma .c {
  color: #999988;
  font-style: italic; }

/* CommentHashbang */
.chroma .ch {
  color: #999988;
  font-style: italic; }

/* CommentMultiline */
.chroma .cm {
  color: #999988;
  font-style: italic; }

/* CommentSingle */
.chroma .c1 {
  color: #999988;
  font-style: italic; }

/* CommentSpecial */
.chroma .cs {
  color: #999999;
  font-weight: 500;
  font-style: italic; }

/* CommentPreproc */
.chroma .cp {
  color: #999999;
  font-weight: 500;
  font-style: italic; }

/* CommentPreprocFile */
.chroma .cpf {
  color: #999999;
  font-weight: 500;
  font-style: italic; }

/* Generic */
/* GenericDeleted */
.chroma .gd {
  color: #000000;
  background-color: #ffdddd; }

/* GenericEmph */
.chroma .ge {
  color: #000000;
  font-style: italic; }

/* GenericError */
.chroma .gr {
  color: #aa0000; }

/* GenericHeading */
.chroma .gh {
  color: #999999; }

/* GenericInserted */
.chroma .gi {
  color: #000000;
  background-color: #ddffdd; }

/* GenericOutput */
.chroma .go {
  color: #888888; }

/* GenericPrompt */
.chroma .gp {
  color: #555555; }

/* GenericStrong */
.chroma .gs {
  font-weight: 500; }

/* GenericSubheading */
.chroma .gu {
  color: #aaaaaa; }

/* GenericTraceback */
.chroma .gt {
  color: #aa0000; }

/* GenericUnderline */
.chroma .gl {
  text-decoration: underline; }

/* TextWhitespace */
.chroma .w {
  color: #bbbbbb; }

body {
  font-size: var(--fs-300);
  font-weight: 500;
  font-family: 'Barlow', sans-serif;
  color: var(--clr-indigo); }

h1,
h2,
h3,
h4,
h5 {
  font-stretch: 100%;
  line-height: 1.2;
  font-weight: 700; }

h1,
.h1 {
  font-size: var(--fs-800); }

h2,
.h2 {
  font-size: var(--fs-700); }

h3,
.h3 {
  font-size: var(--fs-600); }

h4,
.h4 {
  font-size: var(--fs-500); }

h5,
.h5 {
  font-size: var(--fs-400); }

small,
.text-small {
  font-size: var(--fs-400); }

strong {
  font-weight: 700; }

a {
  color: var(--clr-primary-200);
  text-decoration: underline; }
  a:hover, a:focus {
    text-decoration: none;
    color: var(--clr-primary-300); }

blockquote {
  background-color: rgba(255, 230, 102, 0.3);
  border-left: 9px solid #ffe666;
  padding: 20px 45px 20px 26px;
  margin-block: 1.5em; }

.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--clr-primary-500);
  color: var(--clr-white);
  margin-top: auto; }
  .footer__item {
    display: flex;
    flex-wrap: wrap;
    margin-top: var(--container-spacing); }
  .footer .list {
    color: var(--clr-white);
    font-size: 1.05rem;
    margin-inline: var(--box-spacing); }
    .footer .list__head {
      font-weight: 700;
      margin-bottom: 0.25em; }
    .footer .list__link {
      color: var(--clr-white);
      text-decoration: none; }
  .footer .copyrights {
    text-align: center;
    margin-block: var(--primary-spacing); }

.self-link .header-link {
  opacity: 0; }

.self-link:hover .header-link {
  opacity: 1; }

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 1;
  padding: var(--primary-spacing) var(--container-spacing);
  box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.15);
  background-color: var(--clr-white); }
  .navbar .logo {
    width: 45px;
    aspect-ratio: 1; }
  .navbar__item {
    display: flex; }
    .navbar__item__link {
      color: var(--clr-indigo);
      text-decoration: none;
      font-size: 1.25rem;
      position: relative;
      font-weight: 600;
      margin-inline: var(--primary-spacing); }
      .navbar__item__link--active {
        color: var(--clr-primary-400); }
      .navbar__item__link::after {
        content: '';
        position: absolute;
        width: 100%;
        transform: scaleX(0);
        height: 2px;
        bottom: 0;
        left: 0;
        background-color: var(--clr-primary-100);
        transform-origin: bottom right;
        transition: transform 0.25s ease-out; }
      .navbar__item__link:hover {
        color: var(--clr-indigo); }
      .navbar__item__link:hover::after {
        transform: scaleX(1);
        transform-origin: bottom left; }
    @media only screen and (max-width: 65em) {
      .navbar__item {
        display: none; } }
.db {
  display: block; }

.dn {
  display: none; }

.nav-mob {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--clr-indigo);
  padding: 1em 2em; }
  .nav-mob ul,
  .nav-mob li {
    margin: 0;
    padding: 0.5em; }
  .nav-mob li {
    width: 100%;
    display: block;
    text-align: left; }
  .nav-mob .hover-bg-black:hover {
    background-color: var(--clr-black); }
  .nav-mob a {
    text-decoration: none;
    color: var(--clr-white); }
  @media only screen and (min-width: 65em) {
    .nav-mob {
      display: none; } }
.nav-inside {
  display: flex;
  justify-content: space-between;
  width: 100%; }
  .nav-inside .btn {
    border-style: none;
    border: 1px solid var(--clr-white);
    background-color: transparent;
    color: var(--clr-white);
    border-radius: 0;
    width: auto;
    flex: 1 1 auto;
    margin-inline: 0.25em; }

.sidebar {
  background-color: var(--clr-bluishGray);
  width: 20%;
  margin-left: var(--primary-spacing);
  align-self: start;
  position: sticky; }
  .sidebar__wrapper {
    padding-inline: var(--primary-spacing); }
  .sidebar__links__link {
    color: var(--clr--indigo);
    text-decoration: none; }
    .sidebar__links__link--active {
      color: var(--clr-primary-400);
      font-weight: 700;
      text-decoration: none; }
  @media only screen and (max-width: 65em) {
    .sidebar {
      display: none; } }
.btn {
  border-radius: 100vmax;
  padding: 0.5em var(--primary-spacing);
  border-style: none;
  cursor: pointer;
  transition: 0.25s; }
  @media only screen and (max-width: 40em) {
    .btn a {
      font-size: 1.05rem; } }
  .btn--contained {
    display: inline-flex;
    align-items: start;
    background-color: var(--clr-primary-400); }
    .btn--contained a {
      color: var(--clr-white);
      padding-left: 4px; }
    .btn--contained:hover {
      background-color: var(--clr-primary-300); }
  .btn--outlined {
    color: var(--clr-primary-400);
    background-color: transparent;
    border: 1px solid var(--clr-primary-400); }
    .btn--outlined::after {
      content: "›";
      display: inline-block;
      padding-left: 4px;
      transition: transform 0.3s ease-out; }
    .btn--outlined:hover {
      border-color: transparent; }
      .btn--outlined:hover::after {
        transform: translateX(4px); }

.card {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap; }
  .card__item {
    width: 300px;
    box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
    border-radius: 4px;
    padding: var(--primary-spacing);
    border-top: 4px solid var(--clr-primary-400);
    margin-top: 1em; }
    .card__item > :not(:first-child) {
      margin-top: 0.5em; }
  .card__title {
    font-size: 1.25rem;
    font-weight: 600; }
  .card__subtitle {
    font-weight: 600;
    font-size: .875rem; }
  .card__desc {
    font-size: .875rem; }
  .card__btn__left {
    border: 0;
    background-color: transparent; }
    .card__btn__left__link, .card__btn__left__link:hover {
      color: var(--clr-secondary-500);
      text-decoration: none; }
    .card__btn__left:hover {
      background-color: var(--clr-secondary-100); }
  .card__btn__right {
    float: right;
    border: 0;
    border-radius: 5px;
    padding-inline: 10px;
    color: var(--clr-white);
    background-color: var(--clr-primary-400); }
    .card__btn__right:hover {
      background-color: var(--clr-primary-300); }
  .card .maven {
    display: none; }

.pagination {
  display: flex;
  width: 100%;
  text-transform: uppercase;
  font-size: 90%;
  margin-top: var(--box-spacing); }
  .pagination__left {
    width: 50%; }
    .pagination__left__link::before {
      content: "«";
      font-size: var(--fs-300); }
  .pagination__right {
    text-align: right;
    width: 50%; }
    .pagination__right__link::after {
      content: "»";
      font-size: var(--fs-300); }

/*  Search Form */
.searchBox {
  background: var(--clr-primary-500);
  height: 45px;
  border-radius: 45px;
  padding: 2.5px; }
  .searchBox:hover > .searchInput {
    width: 200px;
    padding: 0 6px;
    transition: 0.4s; }
  .searchBox:hover > .searchButton {
    background: var(--clr-white); }
    .searchBox:hover > .searchButton svg {
      fill: var(--clr-indigo); }

.searchInput {
  border: none;
  background: none;
  outline: none;
  float: left;
  padding: 0;
  color: var(--clr-white);
  transition: 0.4s;
  line-height: 40px;
  width: 0px; }

.searchButton {
  color: var(--clr-white);
  float: right;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border-color: var(--clr-white);
  background: var(--clr-primary-500);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.4s; }

/*  Search Template */
.search-list {
  margin-bottom: var(--primary-spacing); }

.list-title {
  margin-block: var(--primary-spacing); }

table {
  border-collapse: collapse;
  font-size: 0.9em;
  display: block;
  overflow-x: auto;
  width: 100%;
  border-collapse: collapse; }
  table th,
  table td {
    border: 2px solid var(--clr-primary-200);
    padding: 12px 15px; }

thead tr {
  background-color: var(--clr-primary-400);
  color: var(--clr-white);
  text-align: left;
  font-weight: 600; }

tbody tr:nth-of-type(even) {
  background-color: var(--clr-neutral-100); }

tbody tr:hover {
  color: var(--clr-secondary-500); }

.toc {
  width: 20%;
  padding-top: 0.1rem;
  align-self: start;
  position: sticky;
  top: 9rem; }
  .toc__head {
    margin-bottom: 0.8em;
    font-weight: 700;
    font-size: 0.9rem; }
  .toc nav {
    border-left: 1px solid var(--clr-neutral-300);
    overflow-y: auto;
    max-height: calc(100vh - 9rem); }
  .toc ul {
    list-style: none;
    font-size: 0.9rem;
    margin: 0.5rem;
    padding: 0;
    padding-left: 0.25rem; }
    .toc ul li:not(last-child) {
      margin-bottom: 0.125em; }
  .toc a {
    text-decoration: none; }
  @media only screen and (max-width: 65em) {
    .toc {
      display: none; } }
.community ul ::marker {
  content: "👤"; }

.community ul > li {
  padding-left: 0.5em; }

.doc .article {
  width: 100%;
  padding-inline: var(--container-spacing); }
  @media only screen and (min-width: 65em) {
    .doc .article {
      width: 60%; } }
@media only screen and (min-width: 65em) {
  .doc {
    display: flex; } }

.download {
  margin-block: var(--container-spacing); }
  .download p {
    max-width: 100%; }
  .download .custom-marker > ::marker {
    content: "🔗";
    font-size: large; }
  .download .custom-marker > li {
    padding-left: 0.5em; }

.accordion {
  margin-block: var(--container-spacing); }
  .accordion__item {
    border-bottom: 2px solid var(--clr-primary-200); }
  .accordion__btn {
    position: relative;
    display: block;
    text-align: left;
    width: 100%;
    padding: var(--primary-spacing) 0;
    font-size: var(--fs-400);
    border: none;
    background: none;
    outline: none;
    cursor: pointer; }
    .accordion__btn:hover, .accordion__btn:focus {
      color: var(--clr-primary-200); }
    .accordion__btn__icon {
      display: inline-block;
      position: absolute;
      top: 18px;
      right: 0;
      width: 22px;
      height: 22px;
      border: 2px solid;
      border-radius: 22px; }
      .accordion__btn__icon::before {
        display: block;
        position: absolute;
        content: '';
        top: 9px;
        left: 5px;
        width: 10px;
        height: 2px;
        background: currentColor; }
      .accordion__btn__icon::after {
        display: block;
        position: absolute;
        content: '';
        top: 5px;
        left: 9px;
        width: 2px;
        height: 10px;
        background: currentColor; }
  .accordion__btn[aria-expanded='true'] {
    color: var(--clr-primary-200);
    border-bottom: 2px solid var(--clr-primary-200); }
    .accordion__btn[aria-expanded='true'] .accordion__btn__icon::after {
      width: 0; }
    .accordion__btn[aria-expanded='true'] + .accordion__content {
      opacity: 1;
      max-height: 50em;
      transition: all 200ms linear;
      will-change: opacity, max-height; }
  .accordion__content {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 200ms linear, max-height 200ms linear;
    will-change: opacity, max-height; }
    .accordion__content__inner {
      margin: 2em 0;
      font-size: var(--fs-300); }
      .accordion__content__inner li:not(last-child) {
        margin-bottom: 0.5em; }

.home {
  max-width: 70rem;
  margin: var(--box-spacing) auto;
  padding-inline: var(--box-spacing); }
  .home > * {
    margin-bottom: var(--section-spacing); }
  .home h1,
  .home h2 {
    color: var(--clr-primary-400); }
  .home p {
    font-weight: 600;
    letter-spacing: 1px;
    margin: 1em 0; }
  @media only screen and (min-width: 65em) {
    .home .hero,
    .home .info,
    .home .feature {
      display: flex;
      justify-content: space-between; } }
  @media only screen and (max-width: 65em) {
    .home .hero,
    .home .info,
    .home .feature {
      width: fit-content;
      margin-left: auto;
      margin-right: auto;
      text-align: center;
      align-items: center; } }
.hero {
  align-items: center;
  column-gap: 5em; }
  .hero__img {
    width: 45%; }
    @media only screen and (max-width: 65em) {
      .hero__img {
        width: 70%; } }
  .hero__content {
    width: 45%; }
    @media only screen and (max-width: 65em) {
      .hero__content {
        width: 100%; } }
    .hero__content__head {
      font-size: 5.4rem; }
      @media only screen and (max-width: 65em) {
        .hero__content__head {
          font-size: 4.5rem; } }
      @media only screen and (max-width: 40em) {
        .hero__content__head {
          font-size: 3.5rem; } }
    .hero__content__desc {
      font-size: 1.25rem;
      padding-block: 0.5em;
      font-weight: 600;
      line-height: 1.5; }
      @media only screen and (max-width: 65em) {
        .hero__content__desc {
          font-size: 1.05rem; } }
    .hero__content__actions {
      padding-top: 1.5em;
      display: flex;
      column-gap: var(--primary-spacing);
      font-size: 1.25rem; }
      .hero__content__actions a {
        text-decoration: none; }
      @media only screen and (max-width: 65em) {
        .hero__content__actions {
          justify-content: center; } }
.info ul {
  margin: 0;
  padding: 0; }
  .info ul li {
    padding-inline: 0.5em; }
  .info ul li:nth-child(even) {
    background-color: var(--clr-neutral-200); }

.info__about {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 45%; }
  @media only screen and (max-width: 65em) {
    .info__about {
      max-width: 100%; } }
.info__release {
  display: flex;
  flex-direction: column;
  max-width: 45%; }
  .info__release h2 {
    text-align: center; }
  @media only screen and (max-width: 65em) {
    .info__release {
      max-width: 100%; } }
.feature {
  column-gap: 5rem; }
  .feature__item {
    display: flex;
    flex-direction: column;
    align-items: center; }
    .feature__item__media {
      width: 4rem;
      aspect-ratio: 1; }

@media only screen and (max-width: 65em) {
  .example pre code {
    display: block; } }

@media only screen and (min-width: 40em) {
  .report__row {
    display: flex;
    justify-content: space-between;
    padding-top: var(--primary-spacing); } }

.report__item {
  display: inline-flex;
  column-gap: var(--primary-spacing);
  align-items: center; }

.report__desc {
  font-size: var(--fs-400);
  font-stretch: 100%;
  line-height: 1.3; }

.support {
  position: relative; }
  .support__desc {
    position: absolute;
    top: 25%;
    bottom: 25%;
    left: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    padding: var(--container-spacing);
    margin-left: var(--container-spacing);
    border-radius: 3px; }
    @media only screen and (max-width: 65em) {
      .support__desc {
        top: 15%;
        left: 0%;
        bottom: 15%;
        margin: var(--primary-spacing);
        padding: var(--primary-spacing); } }
    @media only screen and (max-width: 30em) {
      .support__desc {
        top: 10%;
        left: 0%;
        bottom: 10%; }
        .support__desc h2 {
          font-size: 1rem; }
        .support__desc .desc {
          font-size: 0.65rem; } }
.license {
  margin-block: var(--container-spacing); }
  .license__page {
    padding: var(--primary-spacing);
    border: 2px solid var(--clr-indigo);
    box-shadow: 10px 10px var(--clr-primary-100); }

.security h4 {
  color: var(--clr-primary-500); }

.container, .list-title {
  padding: 0 1.5rem;
  max-width: var(--container-width);
  margin-inline: auto; }

.flow > * + * {
  margin-top: var(--flow-spacer, 0.75em); }