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

  html {
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
  }

  :-webkit-any(body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol) {
    margin-bottom: 0;
  }

  :is(body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol) {
    margin-bottom: 0;
  }

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

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

  :-webkit-any(h1, h2, h3, h4, button, input, label) {
    line-height: 1.2;
  }

  :is(h1, h2, h3, h4, button, input, label) {
    line-height: 1.2;
  }

  :-webkit-any(h1, h2, h3, h4) {
    text-wrap: balance;
  }

  :is(h1, h2, h3, h4) {
    text-wrap: balance;
  }

  :-webkit-any(img, picture) {
    max-width: 100%;
    height: auto;
    display: block;
  }

  :is(img, picture) {
    max-width: 100%;
    height: auto;
    display: block;
  }

  :-webkit-any(input, button, textarea, select) {
    font: inherit;
  }

  :is(input, button, textarea, select) {
    font: inherit;
  }
}

@layer body {
  body {
    background: var(--color-mono-000);
    color: var(--color-mono-500);
    text-rendering: optimizeSpeed;
    flex-direction: column;
    margin: 0;
    padding: 0;
    display: flex;
  }

  main {
    flex: auto;
  }
}

@layer font {
  @font-face {
    font-family: Montserrat;
    src: url("/Montserrat-VariableFont_wght.ttf") format("truetype-variations");
    font-weight: 100 1000;
    font-stretch: 25% 151%;
    font-display: swap;
  }
}

@layer highlight {
  @media (prefers-color-scheme: light) {
    .hljs {
      color: #24292e;
      background: #fff;
    }

    .hljs-doctag, .hljs-keyword, .hljs-meta .hljs-keyword, .hljs-template-tag, .hljs-template-variable, .hljs-type, .hljs-variable.language_ {
      color: #d73a49;
    }

    .hljs-title, .hljs-title.class_, .hljs-title.class_.inherited__, .hljs-title.function_ {
      color: #6f42c1;
    }

    .hljs-attr, .hljs-attribute, .hljs-literal, .hljs-meta, .hljs-number, .hljs-operator, .hljs-variable, .hljs-selector-attr, .hljs-selector-class, .hljs-selector-id {
      color: #005cc5;
    }

    .hljs-regexp, .hljs-string, .hljs-meta .hljs-string {
      color: #032f62;
    }

    .hljs-built_in, .hljs-symbol {
      color: #e36209;
    }

    .hljs-comment, .hljs-code, .hljs-formula {
      color: #6a737d;
    }

    .hljs-name, .hljs-quote, .hljs-selector-tag, .hljs-selector-pseudo {
      color: #22863a;
    }

    .hljs-subst {
      color: #24292e;
    }

    .hljs-section {
      color: #005cc5;
      font-weight: bold;
    }

    .hljs-bullet {
      color: #735c0f;
    }

    .hljs-emphasis {
      color: #24292e;
      font-style: italic;
    }

    .hljs-strong {
      color: #24292e;
      font-weight: bold;
    }

    .hljs-addition {
      color: #22863a;
      background-color: #f0fff4;
    }

    .hljs-deletion {
      color: #b31d28;
      background-color: #ffeef0;
    }
  }

  @media (prefers-color-scheme: dark) {
    .hljs {
      color: #c9d1d9;
      background: #0d1117;
    }

    .hljs-doctag, .hljs-keyword, .hljs-meta .hljs-keyword, .hljs-template-tag, .hljs-template-variable, .hljs-type, .hljs-variable.language_ {
      color: #ff7b72;
    }

    .hljs-title, .hljs-title.class_, .hljs-title.class_.inherited__, .hljs-title.function_ {
      color: #d2a8ff;
    }

    .hljs-attr, .hljs-attribute, .hljs-literal, .hljs-meta, .hljs-number, .hljs-operator, .hljs-variable, .hljs-selector-attr, .hljs-selector-class, .hljs-selector-id {
      color: #79c0ff;
    }

    .hljs-regexp, .hljs-string, .hljs-meta .hljs-string {
      color: #a5d6ff;
    }

    .hljs-built_in, .hljs-symbol {
      color: #ffa657;
    }

    .hljs-comment, .hljs-code, .hljs-formula {
      color: #8b949e;
    }

    .hljs-name, .hljs-quote, .hljs-selector-tag, .hljs-selector-pseudo {
      color: #7ee787;
    }

    .hljs-subst {
      color: #c9d1d9;
    }

    .hljs-section {
      color: #1f6feb;
      font-weight: bold;
    }

    .hljs-bullet {
      color: #f2cc60;
    }

    .hljs-emphasis {
      color: #c9d1d9;
      font-style: italic;
    }

    .hljs-strong {
      color: #c9d1d9;
      font-weight: bold;
    }

    .hljs-addition {
      color: #aff5b4;
      background-color: #033a16;
    }

    .hljs-deletion {
      color: #ffdcd7;
      background-color: #67060c;
    }
  }

  pre {
    width: 100%;
    margin-top: 0;
    margin-bottom: 0;
  }

  pre code.hljs {
    border-radius: var(--border-radius-pill);
    border: 1px solid var(--color-mono-400);
    font-family: Consolas, Monaco, monospace;
    font-size: var(--font-size--1);
    padding: 1rem;
    display: block;
    overflow-x: scroll;
  }
}

@layer markdown {
  .markdown {
    font-family: var(--font-body-family);
    font-size: var(--font-body-size);
    font-weight: var(--font-body-weight);
    container-type: inline-size;
  }

  .markdown hr {
    border: .5px solid var(--color-mono-200);
    color: var(--color-mono-100);
    width: 100%;
    margin-top: var(--space-l-r3);
  }

  .markdown picture {
    width: 100%;
  }

  .markdown img {
    width: 100%;
  }

  .markdown a {
    color: currentColor;
    text-underline-offset: 2px;
  }

  .markdown a.active {
    color: currentColor;
    font-weight: bold;
  }

  .markdown a:hover {
    text-underline-offset: 4px;
  }

  .markdown :-webkit-any(p, ul, ol, pre) {
    margin-top: var(--font-body-margin-block-start);
  }

  .markdown :is(p, ul, ol, pre) {
    margin-top: var(--font-body-margin-block-start);
  }

  .markdown :-webkit-any(h1, h2, h3, h4) {
    font-family: var(--font-heading-family);
    font-weight: var(--font-heading-weight);
  }

  .markdown :is(h1, h2, h3, h4) {
    font-family: var(--font-heading-family);
    font-weight: var(--font-heading-weight);
  }

  .markdown h1 {
    font-size: var(--font-heading-size-1);
    margin-top: var(--font-heading-margin-block-start-1);
  }

  .markdown h2 {
    font-size: var(--font-heading-size-2);
    margin-top: var(--font-heading-margin-block-start-2);
  }

  .markdown h3 {
    font-size: var(--font-heading-size-3);
    margin-top: var(--font-heading-margin-block-start-2);
  }

  .markdown h4 {
    font-size: var(--font-heading-size-4);
    margin-top: var(--font-heading-margin-block-start-2);
  }

  .markdown h1 + h2 {
    margin-top: var(--font-heading-margin-block-start-3);
  }

  .markdown h2 + h3 {
    margin-top: var(--font-heading-margin-block-start-4);
  }

  .markdown h3 + h4 {
    margin-top: var(--font-heading-margin-block-start-5);
  }

  .markdown :-webkit-any(h1, h2, h3, h4).display {
    font-family: var(--font-display-family);
    font-weight: var(--font-display-weight);
  }

  .markdown :is(h1, h2, h3, h4).display {
    font-family: var(--font-display-family);
    font-weight: var(--font-display-weight);
  }

  .markdown h1.display {
    font-size: var(--font-display-size-1);
    margin-top: var(--font-display-margin-block-start-1);
  }

  .markdown h2.display {
    font-size: var(--font-display-size-2);
    margin-top: var(--font-display-margin-block-start-2);
  }

  .markdown h3.display {
    font-size: var(--font-display-size-3);
    margin-top: var(--font-display-margin-block-start-2);
  }

  .markdown h4.display {
    font-size: var(--font-display-size-4);
    margin-top: var(--font-display-margin-block-start-2);
  }

  .markdown :-webkit-any(.topic-block, .topic-card) {
    margin-top: var(--space-xs-r3);
  }

  .markdown :is(.topic-block, .topic-card) {
    margin-top: var(--space-xs-r3);
  }

  .markdown :-webkit-any(.topic-featured, .topic-headline, .topic-hero, .topic-profile, .topic-quote, .topic-showcase) {
    margin-top: var(--space-s-r3);
  }

  .markdown :is(.topic-featured, .topic-headline, .topic-hero, .topic-profile, .topic-quote, .topic-showcase) {
    margin-top: var(--space-s-r3);
  }
}

@layer structures {
  .s-flex-row {
    justify-content: flex-start;
    align-items: center;
    gap: var(--gap, var(--space-xs));
    flex-wrap: wrap;
    display: flex;
  }

  .s-flex-column {
    justify-content: flex-start;
    align-items: flex-start;
    gap: var(--gap, var(--space-xs));
    flex-flow: column;
    display: flex;
  }

  .s-popout {
    width: 100vw;
    margin-left: -50vw;
    margin-right: -50vw;
    position: relative;
    left: 50%;
    right: 50%;
    container-type: inline-size;
  }

  .s-grid {
    gap: var(--gap, var(--space-s));
    grid-auto-flow: dense;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--column-width), 100%), 1fr));
    width: 100%;
    display: grid;
  }

  .s-position-fixed {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .s-block-space {
    padding-block: var(--block-space);
  }

  .s-order {
    order: var(--order);
  }

  .s-wrapper {
    max-width: var(--wrapper-width);
    padding-inline: var(--gutter);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    container-type: inline-size;
  }
}

@layer components {
  .button {
    background-color: var(--button-primary-color);
    border: 1px solid var(--button-primary-color);
    color: var(--button-primary-contrast-color);
    cursor: pointer;
    font: inherit;
    -webkit-user-select: none;
    user-select: none;
    padding: .9cap 1.5cap;
    line-height: 1;
    text-decoration: none;
    display: inline-block;
  }

  .button:focus {
    box-shadow: 0 0 .5rem var(--color-primary-200);
  }

  .button:active {
    box-shadow: 0 0 .5rem var(--color-primary-200);
  }

  .button.active {
    text-decoration: underline;
  }

  .button:hover {
    filter: brightness(70%);
    transition: all .35s;
  }

  .button[variant="outline"] {
    color: var(--button-primary-color);
    background-color: #0000;
  }

  .button[variant="stretch"] {
    width: 100%;
  }

  :-webkit-any(a, a:visited, div).fat-link {
    background-color: var(--button-primary-color);
    border: 1px solid var(--button-primary-color);
    color: var(--button-primary-contrast-color);
    cursor: pointer;
    font: inherit;
    text-align: center;
    -webkit-user-select: none;
    user-select: none;
    padding: .9cap 1.5cap;
    line-height: 1;
    text-decoration: none;
  }

  :-webkit-any(a, a:visited, div).fat-link:focus {
    box-shadow: 0 0 .5rem var(--color-primary-200);
  }

  :-webkit-any(a, a:visited, div).fat-link:active {
    box-shadow: 0 0 .5rem var(--color-primary-200);
  }

  :-webkit-any(a, a:visited, div).fat-link.active {
    text-decoration: underline;
  }

  :-webkit-any(a, a:visited, div).fat-link:hover {
    filter: brightness(70%);
    transition: all .35s;
  }

  :-webkit-any(a, a:visited, div).fat-link[variant="outline"] {
    color: var(--button-primary-color);
    background-color: #0000;
  }

  :-webkit-any(a, a:visited, div).fat-link[variant="stretch"] {
    width: 100%;
  }

  :is(a, a:visited, div).fat-link {
    background-color: var(--button-primary-color);
    border: 1px solid var(--button-primary-color);
    color: var(--button-primary-contrast-color);
    cursor: pointer;
    font: inherit;
    text-align: center;
    -webkit-user-select: none;
    user-select: none;
    padding: .9cap 1.5cap;
    line-height: 1;
    text-decoration: none;
  }

  :is(a, a:visited, div).fat-link:focus {
    box-shadow: 0 0 .5rem var(--color-primary-200);
  }

  :is(a, a:visited, div).fat-link:active {
    box-shadow: 0 0 .5rem var(--color-primary-200);
  }

  :is(a, a:visited, div).fat-link.active {
    text-decoration: underline;
  }

  :is(a, a:visited, div).fat-link:hover {
    filter: brightness(70%);
    transition: all .35s;
  }

  :is(a, a:visited, div).fat-link[variant="outline"] {
    color: var(--button-primary-color);
    background-color: #0000;
  }

  :is(a, a:visited, div).fat-link[variant="stretch"] {
    width: 100%;
  }

  svg.icon {
    width: 1.8cap;
    height: 1.8cap;
  }

  .with-icon {
    align-items: center;
    gap: .5cap;
    display: inline-flex;
  }

  .input {
    background-color: var(--color-mono-000);
    border: 1px solid #0000;
    border-color: var(--color-mono-300);
    color: var(--color-mono-500);
    font: inherit;
    padding: var(--space-2xs);
    border-radius: .25rem;
    width: 100%;
    display: block;
  }

  .input:focus {
    box-shadow: 0 0 .5rem var(--color-primary-200);
    outline: none;
  }

  .input:active {
    box-shadow: 0 0 .5rem var(--color-primary-200);
    outline: none;
  }

  .input::placeholder {
    color: var(--color-mono-300), ;
  }

  .input:disabled {
    background-color: var(--color-mono-100);
    color: var(--color-mono-300);
    cursor: not-allowed;
  }

  .input[type="radio"] {
    width: auto;
  }

  .input[type="checkbox"] {
    width: auto;
  }

  .input.switch[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--color-mono-200);
    border: 1px solid #00000040;
    border-color: var(--color-mono-200);
    border-radius: var(--border-radius-circle);
    cursor: pointer;
    vertical-align: top;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
    background-position: 0;
    background-repeat: no-repeat;
    background-size: contain;
    width: 3rem;
    height: 1.5rem;
    margin: 5px 5px 5px 0;
    transition: background-color .15s, background-position .15s, border-color .15s;
  }

  .input.switch[type="checkbox"]:disabled {
    cursor: default;
    opacity: .5;
  }

  .input.switch[type="checkbox"]:checked {
    background-color: var(--color-primary-400);
    border-color: var(--color-primary-400);
    background-position: 100%;
  }

  .skip-link {
    top: var(--gutter);
    left: var(--gutter);
    z-index: 99;
    position: absolute;
  }

  .skip-link:not(:focus) {
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
    width: 1px;
    height: 0;
    margin: 0;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }

  .textarea {
    background-color: var(--color-mono-000);
    border: 1px solid #0000;
    border-color: var(--color-mono-200);
    border-radius: var(--border-radius-rounded);
    color: var(--color-mono-500);
    font: inherit;
    resize: none;
    width: 100%;
    min-height: 10cap;
    padding: .5rem;
    display: block;
  }

  .textarea.resize {
    resize: vertical;
    overflow: auto;
  }

  .textarea:focus {
    box-shadow: 0 0 .5rem var(--color-primary-200);
    outline: none;
  }

  .textarea:active {
    box-shadow: 0 0 .5rem var(--color-primary-200);
    outline: none;
  }

  .textarea:disabled {
    background-color: var(--color-mono-100);
    color: var(--color-mono-300);
    cursor: not-allowed;
  }

  .navigation-footer {
    align-items: center;
    gap: var(--space-xs);
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    display: flex;
  }

  .navigation-footer ul {
    align-items: center;
    gap: var(--space-xs);
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    display: flex;
  }

  .navigation-footer ul {
    margin: 0;
    padding: 0;
  }

  .navigation-footer a {
    color: currentColor;
    text-decoration: none;
    display: flex;
  }

  .navigation-footer a:visited {
    color: currentColor;
    text-decoration: none;
    display: flex;
  }

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

  @container (width >= 45rem) {
    .navigation-footer {
      justify-content: space-between;
    }

    .navigation-footer ul {
      width: auto;
    }
  }

  .modal-menu .modal-background {
    visibility: hidden;
    background-color: #00000080;
    height: 100vh;
    transition: opacity .5s;
  }

  .modal-menu .modal-close-button {
    border-radius: var(--border-radius-rounded);
    align-self: flex-end;
  }

  .modal-menu .modal-popup {
    background: var(--color-mono-000);
    border-radius: var(--border-radius-rounded);
    border: 1px solid var(--color-mono-300);
    bottom: initial;
    box-shadow: 0px 0px 1rem var(--color-mono-600);
    margin: var(--space-s);
    padding: var(--space-s);
    visibility: hidden;
    transition: transform .35s cubic-bezier(.8, -.4, .2, 1.44), opacity .5s;
    transform: scale(.8);
  }

  .modal-menu .modal-popup nav {
    gap: var(--space-s);
  }

  .modal-menu .modal-popup .popup-main-actions {
    flex-wrap: wrap;
    display: flex;
  }

  .modal-menu .modal-popup .popup-social-actions {
    flex-wrap: wrap;
    display: flex;
  }

  .modal-menu .modal-popup .popup-call-actions {
    flex-wrap: wrap;
    display: flex;
  }

  .modal-menu .modal-popup .popup-main-actions {
    gap: var(--space-xs);
    flex-direction: column;
  }

  .modal-menu .modal-popup .popup-social-actions {
    align-items: center;
    gap: var(--space-2xs);
  }

  .modal-menu .modal-popup .popup-call-actions {
    align-items: center;
    gap: var(--space-2xs);
  }

  .navigation-legal {
    font-size: var(--font-size--1);
    align-items: center;
    gap: var(--space-s);
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    display: flex;
  }

  .navigation-legal sup {
    margin-top: -1.4em;
  }

  .navigation-legal ul {
    margin: 0;
    padding: 0;
  }

  .navigation-legal a {
    color: currentColor;
    text-decoration: none;
    display: flex;
  }

  .navigation-legal a:visited {
    color: currentColor;
    text-decoration: none;
    display: flex;
  }

  .navigation-legal a:hover {
    text-decoration: underline;
  }

  @container (width >= 45rem) {
    .navigation-legal {
      justify-content: space-between;
    }
  }

  .topic.topic-block .topic-abstract {
    flex: 1;
  }

  .topic.topic-card {
    border-radius: var(--border-radius-rounded);
    border: 1px solid var(--color-mono-200);
    box-shadow: 0 0 1rem var(--color-mono-100);
    cursor: pointer;
    padding: var(--space-s);
    transition: transform .2s;
  }

  .topic.topic-card:hover {
    transform: translateY(-.3rem);
  }

  .topic.topic-card .topic-abstract {
    flex: 1;
  }

  :-webkit-any(a, a:visited):has( > .topic-card) {
    width: 100%;
    text-decoration: none;
    display: flex;
  }

  :is(a, a:visited):has( > .topic-card) {
    width: 100%;
    text-decoration: none;
    display: flex;
  }

  .topic.topic-featured {
    gap: var(--space-m);
  }

  @container (width >= 45rem) {
    .topic.topic-featured {
      flex-direction: row;
      align-items: center;
    }
  }

  .topic.topic-featured .topic-picture img {
    aspect-ratio: 5 / 4;
  }

  @container (width >= 45rem) {
    .topic.topic-featured .topic-picture {
      width: calc(50% - (var(--space-l) / 2));
    }
  }

  .topic.topic-featured .topic-content {
    gap: var(--space-xs);
  }

  @container (width >= 45rem) {
    .topic.topic-featured .topic-content {
      width: calc(50% - (var(--space-l) / 2));
    }
  }

  .topic.topic-featured .topic-content .topic-icon {
    font-size: var(--font-size-4);
  }

  .topic.topic-featured .topic-content .topic-heading.display {
    font-size: var(--font-size-4);
  }

  .topic.topic-featured .topic-content .topic-abstract {
    font-size: var(--font-size-1);
  }

  .topic.topic-featured .topic-content .topic-action {
    font-size: var(--font-size-1);
  }

  .topic.topic-headline {
    align-items: center;
    gap: var(--space-2xl);
  }

  .topic.topic-headline .topic-picture img {
    aspect-ratio: 1;
  }

  @container (width >= 45rem) {
    .topic.topic-headline .topic-picture img {
      aspect-ratio: 9 / 4;
    }
  }

  .topic.topic-headline .topic-content {
    max-width: var(--wrapper-width);
    padding: var(--space-s);
    align-items: center;
    gap: var(--space-m);
  }

  .topic.topic-headline .topic-content .topic-icon {
    font-size: var(--font-size-5);
  }

  .topic.topic-headline .topic-content .topic-labels {
    font-size: var(--font-size-1);
    justify-content: center;
  }

  .topic.topic-headline .topic-content .topic-heading.display {
    font-size: var(--font-size-5);
    text-align: center;
    max-width: 20ch;
  }

  .topic.topic-headline .topic-content .topic-abstract {
    font-size: var(--font-size-1);
    text-align: center;
    text-wrap: balance;
    max-width: 40ch;
  }

  .topic.topic-headline .topic-content .topic-action {
    font-size: var(--font-size-1);
  }

  .topic.topic-hero {
    color: var(--color-mono-000);
    align-items: center;
    gap: var(--space-l);
    position: relative;
  }

  .topic.topic-hero .topic-picture img {
    aspect-ratio: 2 / 3;
  }

  @container (width >= 45rem) {
    .topic.topic-hero .topic-picture img {
      aspect-ratio: 15 / 7;
      min-height: 38rem;
    }
  }

  .topic.topic-hero .topic-content {
    max-width: var(--wrapper-width);
    padding: var(--space-2xl);
    gap: var(--space-m);
    justify-content: center;
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
  }

  .topic.topic-hero .topic-content .topic-labels {
    font-size: var(--font-size-1);
    font-weight: var(--font-body-weight-bold);
    justify-content: center;
  }

  .topic.topic-hero .topic-content .topic-icon {
    font-size: var(--font-size-5);
  }

  .topic.topic-hero .topic-content .topic-heading.display {
    font-size: var(--font-size-5);
    max-width: 30ch;
  }

  .topic.topic-hero .topic-content .topic-abstract {
    font-size: var(--font-size-1);
    font-weight: var(--font-body-weight-bold);
    text-wrap: balance;
    max-width: 40ch;
  }

  .topic.topic-hero .topic-content .topic-action {
    font-size: var(--font-size-1);
  }

  .topic.topic-profile {
    align-items: center;
    gap: var(--space-m);
  }

  .topic.topic-profile .topic-picture img {
    aspect-ratio: 1;
  }

  .topic.topic-profile .topic-picture {
    max-width: 300px;
  }

  .topic.topic-profile .topic-picture img {
    border-radius: 100%;
  }

  .topic.topic-profile .topic-content {
    max-width: var(--wrapper-width);
    padding: var(--space-s);
    align-items: center;
    gap: var(--space-s);
  }

  .topic.topic-profile .topic-content .topic-icon {
    font-size: var(--font-size-5);
  }

  .topic.topic-profile .topic-content .topic-labels {
    font-size: var(--font-size-1);
    justify-content: center;
  }

  .topic.topic-profile .topic-content .topic-heading.display {
    font-size: var(--font-size-4);
    text-align: center;
    max-width: 20ch;
  }

  .topic.topic-profile .topic-content .topic-abstract {
    font-size: var(--font-size-1);
    text-align: center;
    text-wrap: balance;
    max-width: 40ch;
  }

  .topic.topic-profile .topic-content .topic-action {
    font-size: var(--font-size-1);
  }

  .topic.topic-quote {
    justify-content: center;
    align-items: center;
    gap: var(--space-m);
  }

  @container (width >= 45rem) {
    .topic.topic-quote {
      flex-direction: row;
    }
  }

  .topic.topic-quote .topic-picture img {
    aspect-ratio: 1;
  }

  .topic.topic-quote .topic-picture {
    max-width: 200px;
  }

  @container (width >= 45rem) {
    .topic.topic-quote .topic-picture {
      max-width: 17vw;
    }
  }

  .topic.topic-quote .topic-picture img {
    border-radius: 100%;
  }

  .topic.topic-quote .topic-content {
    align-items: center;
    gap: var(--space-s);
  }

  @container (width >= 45rem) {
    .topic.topic-quote .topic-content {
      max-width: 40vw;
    }
  }

  .topic.topic-quote .topic-content .topic-icon {
    font-size: var(--font-size-5);
  }

  .topic.topic-quote .topic-content .topic-labels {
    font-size: var(--font-size-1);
    justify-content: center;
  }

  .topic.topic-quote .topic-content .topic-heading {
    font-size: var(--font-size-1);
    text-align: center;
  }

  .topic.topic-quote .topic-content .topic-abstract {
    text-align: center;
    text-wrap: balance;
    max-width: 20ch;
    font-style: italic;
    font-size: var(--font-size-2);
  }

  .topic.topic-quote .topic-content .topic-action {
    font-size: var(--font-size-1);
  }

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

  @container (width >= 45rem) {
    .topic.topic-showcase {
      gap: var(--space-m);
      flex-direction: row;
    }
  }

  .topic.topic-showcase .topic-picture img {
    aspect-ratio: 3 / 2;
  }

  @container (width >= 45rem) {
    .topic.topic-showcase .topic-picture {
      width: calc(50% - (var(--space-m) / 2));
    }
  }

  .topic.topic-showcase .topic-content {
    justify-content: center;
    gap: var(--space-2xs);
    width: 100%;
  }

  @container (width >= 45rem) {
    .topic.topic-showcase .topic-content {
      width: calc(50% - (var(--space-m) / 2));
    }
  }

  .topic.topic-showcase .topic-content .topic-action {
    color: var(--color-primary-400);
  }

  .topic :-webkit-any(p, h1, h2, h3, h4, ul) {
    margin: 0;
    padding: 0;
  }

  .topic :is(p, h1, h2, h3, h4, ul) {
    margin: 0;
    padding: 0;
  }

  .topic {
    gap: var(--space-s);
    flex-direction: column;
    width: 100%;
    display: flex;
  }

  .topic .topic-picture {
    order: var(--order);
    width: 100%;
  }

  .topic .topic-picture img {
    aspect-ratio: 2;
    object-fit: cover;
    width: 100%;
  }

  .topic .topic-content {
    align-items: flex-start;
    gap: var(--space-xs);
    flex-direction: column;
    height: 100%;
    display: flex;
  }

  .topic .topic-content .topic-icon {
    font-size: var(--font-size-3);
    color: var(--color-primary-400);
  }

  .topic .topic-content .topic-labels {
    color: var(--color-primary-400);
    gap: var(--space-2xs);
    flex-wrap: wrap;
    display: flex;
  }

  .topic .topic-content .topic-heading {
    font-size: var(--font-size-1);
  }
}

@layer ce;

@layer utilities {
  .u-flex-1 {
    flex: 1;
  }

  .u-justify-space-between {
    justify-content: space-between;
  }

  .u-border-radius-rounded {
    border-radius: var(--border-radius-rounded);
  }

  .u-border-radius-pill {
    border-radius: var(--border-radius-pill);
  }

  .u-border-radius-circle {
    border-radius: var(--border-radius-circle);
  }

  .u-color-mono-000 {
    color: var(--color-mono-000);
  }

  .u-color-mono-100 {
    color: var(--color-mono-100);
  }

  .u-color-mono-200 {
    color: var(--color-mono-200);
  }

  .u-color-mono-300 {
    color: var(--color-mono-300);
  }

  .u-color-mono-400 {
    color: var(--color-mono-400);
  }

  .u-color-mono-500 {
    color: var(--color-mono-500);
  }

  .u-color-mono-600 {
    color: var(--color-mono-600);
  }

  .u-color-mono-700 {
    color: var(--color-mono-700);
  }

  .u-bg-mono-000 {
    background: var(--color-mono-000);
  }

  .u-bg-mono-100 {
    background: var(--color-mono-100);
  }

  .u-bg-mono-200 {
    background: var(--color-mono-200);
  }

  .u-bg-mono-300 {
    background: var(--color-mono-300);
  }

  .u-bg-mono-400 {
    background: var(--color-mono-400);
  }

  .u-bg-mono-500 {
    background: var(--color-mono-500);
  }

  .u-bg-mono-600 {
    background: var(--color-mono-600);
  }

  .u-bg-mono-700 {
    background: var(--color-mono-700);
  }

  .u-inline-gutter {
    padding-inline: var(--gutter);
  }

  .u-grid-two-cols {
    --column-width: calc((var(--wrapper-width)  - (var(--gap) * 2)  - (var(--gutter) * 2)) / 3 + .1rem);
  }

  .u-grid-three-cols {
    --column-width: calc((var(--wrapper-width)  - (var(--gap) * 3)  - (var(--gutter) * 2)) / 4 + .1rem);
  }

  .u-grid-four-cols {
    --column-width: calc((var(--wrapper-width)  - (var(--gap) * 4)  - (var(--gutter) * 2)) / 5 + .1rem);
  }

  .u-border-bottom {
    border-bottom: 1px solid var(--color-mono-100);
  }

  .u-border-top {
    border-top: 1px solid var(--color-mono-100);
  }

  .u-visually-hidden {
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
    width: 1px;
    height: 0;
    margin: 0;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }

  .u-block-space-3xs {
    --block-space: var(--space-3xs);
  }

  .u-block-space-2xs {
    --block-space: var(--space-2xs);
  }

  .u-block-space-xs {
    --block-space: var(--space-xs);
  }

  .u-block-space-s {
    --block-space: var(--space-s);
  }

  .u-block-space-m {
    --block-space: var(--space-m);
  }

  .u-block-space-l {
    --block-space: var(--space-l);
  }

  .u-block-space-xl {
    --block-space: var(--space-xl);
  }

  .u-block-space-2xl {
    --block-space: var(--space-2xl);
  }

  .u-block-space-3xl {
    --block-space: var(--space-3xl);
  }

  .u-order-2 {
    --order: 2;
  }

  .u-max-chars-70 {
    max-width: 70ch;
  }

  .u-max-chars-60 {
    max-width: 60ch;
  }

  .u-max-chars-50 {
    max-width: 50ch;
  }

  .u-max-chars-40 {
    max-width: 40ch;
  }

  .u-max-chars-30 {
    max-width: 30ch;
  }

  .u-max-chars-20 {
    max-width: 20ch;
  }

  .u-font-size--2 {
    font-size: var(--font-size--2);
  }

  .u-font-size--1 {
    font-size: var(--font-size--1);
  }

  .u-font-size-0 {
    font-size: var(--font-size-0);
  }

  .u-font-size-1 {
    font-size: var(--font-size-1);
  }

  .u-font-size-2 {
    font-size: var(--font-size-2);
  }

  .u-font-size-3 {
    font-size: var(--font-size-3);
  }

  .u-font-size-4 {
    font-size: var(--font-size-4);
  }

  .u-font-size-5 {
    font-size: var(--font-size-5);
  }

  .u-font-size-6 {
    font-size: var(--font-size-6);
  }

  .u-font-size-7 {
    font-size: var(--font-size-7);
  }

  .u-font-size-8 {
    font-size: var(--font-size-8);
  }

  .u-margin-block-start-0 {
    margin-top: 0;
  }

  .u-color-primary-100 {
    color: var(--color-primary-100);
  }

  .u-color-primary-200 {
    color: var(--color-primary-200);
  }

  .u-color-primary-300 {
    color: var(--color-primary-300);
  }

  .u-color-primary-400 {
    color: var(--color-primary-400);
  }

  .u-color-primary-500 {
    color: var(--color-primary-500);
  }

  .u-color-primary-600 {
    color: var(--color-primary-600);
  }

  .u-bg-primary-100 {
    background: var(--color-primary-100);
  }

  .u-bg-primary-200 {
    background: var(--color-primary-200);
  }

  .u-bg-primary-300 {
    background: var(--color-primary-300);
  }

  .u-bg-primary-400 {
    background: var(--color-primary-400);
  }

  .u-bg-primary-500 {
    background: var(--color-primary-500);
  }

  .u-bg-primary-600 {
    background: var(--color-primary-600);
  }

  .u-gap-0 {
    --gap: 0;
  }

  .u-gap-3xs {
    --gap: var(--space-3xs);
  }

  .u-gap-2xs {
    --gap: var(--space-2xs);
  }

  .u-gap-xs {
    --gap: var(--space-xs);
  }

  .u-gap-s {
    --gap: var(--space-s);
  }

  .u-gap-m {
    --gap: var(--space-m);
  }

  .u-gap-l {
    --gap: var(--space-l);
  }

  .u-gap-xl {
    --gap: var(--space-xl);
  }

  .u-gap-2xl {
    --gap: var(--space-2xl);
  }

  .u-gap-3xl {
    --gap: var(--space-3xl);
  }

  .u-width-100, .u-width-child-100, .u-width-child-100 > *, .u-object-fit-cover {
    width: 100%;
  }

  .u-object-fit-cover img {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
}

@layer custom {
  @font-face {
    font-family: Exo;
    src: url("/Exo-VariableFont_wght.ttf") format("truetype-variations");
    font-weight: 100 1000;
    font-stretch: 25% 151%;
    font-display: swap;
  }

  .markdown a {
    color: var(--color-primary-500);
  }

  .markdown a > .topic-card {
    color: var(--color-mono-500);
  }

  .markdown code {
    color: var(--color-primary-500);
    font-weight: 500;
  }

  .markdown blockquote {
    margin-top: var(--font-body-margin-block-start);
  }

  .markdown blockquote:not(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    border-left: 10px solid var(--color-primary-500);
    padding-left: var(--space-2xs-r2);
    margin-left: 0;
  }

  .markdown blockquote:-webkit-any(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    border-right: 10px solid var(--color-primary-500);
    padding-right: var(--space-2xs-r2);
    margin-right: 0;
  }

  .markdown blockquote:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
    border-right: 10px solid var(--color-primary-500);
    padding-right: var(--space-2xs-r2);
    margin-right: 0;
  }

  .markdown blockquote p {
    margin-top: 0;
  }

  .markdown h4 {
    margin-top: var(--font-heading-margin-block-start-3);
  }

  .markdown :-webkit-any(ul, ol) {
    margin-top: var(--space-s);
  }

  .markdown :is(ul, ol) {
    margin-top: var(--space-s);
  }

  .markdown table {
    width: 100%;
    margin-block: var(--space-xs-r2);
    display: block;
    overflow: scroll;
  }

  .markdown table thead {
    background-color: var(--color-primary-500);
    color: var(--color-mono-000);
  }

  .markdown table tbody tr:nth-child(2n) {
    background-color: var(--color-mono-100);
  }

  .markdown table th {
    padding-inline: var(--space-2xs);
    padding-block: var(--space-3xs);
  }

  .markdown table td {
    padding-inline: var(--space-2xs);
    padding-block: var(--space-3xs);
  }

  .markdown .diagram .s-wrapper {
    border: 1px solid var(--color-mono-200);
    color: #707070;
    font-size: var(--font-size--1);
    background-color: #f0f0f0;
    padding-bottom: var(--space-xs);
    font-weight: 500;
  }

  .markdown .figure .s-wrapper {
    color: var(--color-mono-500);
    font-size: var(--font-size--1);
    padding-bottom: var(--space-xs);
    font-weight: 500;
  }

  .site-header {
    font-family: var(--font-body-family);
    font-size: var(--font-size-0);
    font-weight: var(--font-body-weight);
    color: var(--color-primary-600);
    z-index: 100;
  }

  .site-footer {
    font-family: var(--font-body-family);
    font-size: var(--font-size-0);
    font-weight: var(--font-body-weight);
    margin-top: var(--space-3xl);
  }

  .topic-profile .topic-picture img {
    border: .35rem solid var(--color-primary-500);
  }

  .topic .topic-icon {
    color: var(--color-primary-500);
  }

  .topic .topic-labels {
    color: var(--color-primary-500);
  }
}

:root {
  --border-radius-circle: 9999px;
  --border-radius-pill: 1rem;
  --border-radius-rounded: .35rem;
  --button-primary-color: #028f97;
  --button-primary-contrast-color: #fff;
  --color-mono-000: #fff;
  --color-mono-100: #e6e6e6;
  --color-mono-200: #bfbfbf;
  --color-mono-300: #999;
  --color-mono-400: #737373;
  --color-mono-500: #4d4d4d;
  --color-mono-600: #262626;
  --color-mono-700: #000;
  --color-primary-100: #cdfcfe;
  --color-primary-200: #81f7fd;
  --color-primary-300: #36f2fc;
  --color-primary-400: #03d7e2;
  --color-primary-500: #028f97;
  --color-primary-600: #01484b;
  --font-body-family: "Helvetica Neue", sans-serif;
  --font-body-margin-block-start: clamp(.5625rem, .106rem + 2.2826vi, 1.875rem);
  --font-body-size: clamp(1rem, .9432rem + .2273vi, 1.125rem);
  --font-body-weight: 400;
  --font-body-weight-bold: 600;
  --font-display-family: Exo, "Helvetica Neue", sans-serif;
  --font-display-margin-block-start-1: clamp(2.25rem, 1.2935rem + 4.7826vi, 5rem);
  --font-display-margin-block-start-2: clamp(1.6875rem, .9701rem + 3.587vi, 3.75rem);
  --font-display-margin-block-start-3: clamp(.875rem, .5272rem + 1.7391vi, 1.875rem);
  --font-display-margin-block-start-4: clamp(.875rem, .5272rem + 1.7391vi, 1.875rem);
  --font-display-margin-block-start-5: clamp(.5625rem, .3234rem + 1.1957vi, 1.25rem);
  --font-display-size-1: clamp(2.986rem, 2.3926rem + 2.3737vi, 4.2915rem);
  --font-display-size-2: clamp(2.4883rem, 2.0588rem + 1.718vi, 3.4332rem);
  --font-display-size-3: clamp(2.0736rem, 1.7677rem + 1.2236vi, 2.7466rem);
  --font-display-size-4: clamp(1.728rem, 1.5147rem + .8532vi, 2.1973rem);
  --font-display-weight: 800;
  --font-heading-family: Exo, "Helvetica Neue", sans-serif;
  --font-heading-margin-block-start-1: clamp(2.25rem, 1.2935rem + 4.7826vi, 5rem);
  --font-heading-margin-block-start-2: clamp(1.6875rem, .9701rem + 3.587vi, 3.75rem);
  --font-heading-margin-block-start-3: clamp(1.125rem, .6467rem + 2.3913vi, 2.5rem);
  --font-heading-margin-block-start-4: clamp(.3125rem, .0951rem + 1.087vi, .9375rem);
  --font-heading-margin-block-start-5: clamp(.3125rem, .0951rem + 1.087vi, .9375rem);
  --font-heading-size-1: clamp(2.4883rem, 2.0588rem + 1.718vi, 3.4332rem);
  --font-heading-size-2: clamp(2.0736rem, 1.7677rem + 1.2236vi, 2.7466rem);
  --font-heading-size-3: clamp(1.728rem, 1.5147rem + .8532vi, 2.1973rem);
  --font-heading-size-4: clamp(1.44rem, 1.2955rem + .5778vi, 1.7578rem);
  --font-heading-weight: 700;
  --font-size--1: clamp(.8333rem, .803rem + .1212vi, .9rem);
  --font-size--2: clamp(.6944rem, .6828rem + .0465vi, .72rem);
  --font-size-0: clamp(1rem, .9432rem + .2273vi, 1.125rem);
  --font-size-1: clamp(1.2rem, 1.1063rem + .375vi, 1.4063rem);
  --font-size-2: clamp(1.44rem, 1.2955rem + .5778vi, 1.7578rem);
  --font-size-3: clamp(1.728rem, 1.5147rem + .8532vi, 2.1973rem);
  --font-size-4: clamp(2.0736rem, 1.7677rem + 1.2236vi, 2.7466rem);
  --font-size-5: clamp(2.4883rem, 2.0588rem + 1.718vi, 3.4332rem);
  --font-size-6: clamp(2.986rem, 2.3926rem + 2.3737vi, 4.2915rem);
  --font-size-7: clamp(3.5832rem, 2.7735rem + 3.2386vi, 5.3644rem);
  --gutter: clamp(.875rem, .3098rem + 2.8261vi, 2.5rem);
  --wrapper-width: 80rem;
  --space-2xl: clamp(4.5rem, 4.3187rem + .8791vi, 5rem);
  --space-2xs: clamp(.5625rem, .5398rem + .1099vi, .625rem);
  --space-2xs-r2: clamp(.5625rem, .3234rem + 1.1957vi, 1.25rem);
  --space-2xs-r3: clamp(.5625rem, .106rem + 2.2826vi, 1.875rem);
  --space-3xl: clamp(6.75rem, 6.478rem + 1.3187vi, 7.5rem);
  --space-3xs: clamp(.3125rem, .3125rem + 0vi, .3125rem);
  --space-3xs-r2: clamp(.3125rem, .0951rem + 1.087vi, .9375rem);
  --space-3xs-r3: clamp(.3125rem, -.0136rem + 1.6304vi, 1.25rem);
  --space-l: clamp(2.25rem, 2.1593rem + .4396vi, 2.5rem);
  --space-l-r2: clamp(2.25rem, 1.2935rem + 4.7826vi, 5rem);
  --space-l-r3: clamp(2.25rem, .4239rem + 9.1304vi, 7.5rem);
  --space-m: clamp(1.6875rem, 1.6195rem + .3297vi, 1.875rem);
  --space-m-r2: clamp(1.6875rem, .9701rem + 3.587vi, 3.75rem);
  --space-m-r3: clamp(1.6875rem, .5353rem + 5.7609vi, 5rem);
  --space-s: clamp(1.125rem, 1.0797rem + .2198vi, 1.25rem);
  --space-s-r2: clamp(1.125rem, .6467rem + 2.3913vi, 2.5rem);
  --space-s-r3: clamp(1.125rem, .212rem + 4.5652vi, 3.75rem);
  --space-xl: clamp(3.375rem, 3.239rem + .6593vi, 3.75rem);
  --space-xl-r2: clamp(3.375rem, 1.9402rem + 7.1739vi, 7.5rem);
  --space-xs: clamp(.875rem, .8523rem + .1099vi, .9375rem);
  --space-xs-r2: clamp(.875rem, .5272rem + 1.7391vi, 1.875rem);
  --space-xs-r3: clamp(.875rem, .3098rem + 2.8261vi, 2.5rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-mono-700: #fff;
    --color-mono-600: #e6e6e6;
    --color-mono-500: #bfbfbf;
    --color-mono-400: #999;
    --color-mono-300: #737373;
    --color-mono-200: #4d4d4d;
    --color-mono-100: #262626;
    --color-mono-000: #000;
    --color-primary-600: #cdfcfe;
    --color-primary-500: #81f7fd;
    --color-primary-400: #36f2fc;
    --color-primary-300: #03d7e2;
    --color-primary-200: #028f97;
    --color-primary-100: #01484b;
  }
}