:root {
  --let-color--primary: oklch(42% 0.075 60);
  --let-color--secondary: color-mix( in oklab, var(--let-color--primary) 50%, #fff 50% );
  --let-color--tertiary: color-mix( in oklab, var(--let-color--secondary) 50%, #fff 50% );
  --let-color--background: color-mix( in oklab, var(--let-color--secondary) 50%, #fff 50% );
  --let-color--primary-foreground: color-mix( in oklab, var(--let-color--primary) 50%, #000 50% );
  --let-color--secondary-foreground: color-mix( in oklab, var(--let-color--secondary) 50%, #000 50% );
  --let-color--tertiary-foreground: color-mix( in oklab, var(--let-color--tertiary) 50%, #000 50% );
  --let-color--foreground: var(--let-color--primary-foreground);
  --let-color--info-fg: hsl(220, 100%, 20%);
  --let-color--success-fg: hsl(150, 100%, 20%);
  --let-color--critical-fg: hsl(0, 100%, 20%);
  --let-color--warning-fg: hsl(30, 100%, 20%);
  --let-color--info-mid: hsl(220, 100%, 40%);
  --let-color--success-mid: hsl(150, 100%, 40%);
  --let-color--critical-mid: hsl(0, 100%, 40%);
  --let-color--warning-mid: hsl(30, 100%, 40%);
  --let-color--info-bg: hsl(220, 80%, 80%);
  --let-color--success-bg: hsl(150, 80%, 80%);
  --let-color--critical-bg: hsl(0, 80%, 80%);
  --let-color--warning-bg: hsl(30, 80%, 80%);
}

.container {
  margin: 0 auto;
  max-width: 70em;
  padding: 0 1em;
}

body {
  margin: 0;
  padding: 0;
  font-family: Roboto, sans-serif;
  line-height: 1.2;
  background-color: var(--let-color--background);
  color: var(--let-color--foreground);
  display: grid;
  grid-template-areas: "header header" "aside main" "footer footer";
  grid-template-columns: max-content auto;
}
@media (max-width: 48em) {
  body {
    grid-template-areas: "header" "aside" "main" "footer";
    grid-template-columns: 1fr;
  }
}

.header {
  grid-area: header;
}

.main {
  grid-area: main;
  padding-top: 1em;
}

.aside {
  grid-area: aside;
  padding-top: 1em;
}

.footer {
  grid-area: footer;
}

.bold {
  font-weight: bold;
}

a {
  text-decoration: none;
  color: currentColor;
}

.link {
  font-weight: bold;
  color: var(--let-color--foreground);
}
.link:hover {
  color: var(--let-color--tertiary-foreground);
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

.title {
  font-size: 1.8em;
}

.subtitle {
  font-size: 1.2em;
}

.subtext {
  color: var(--let--text-inactive);
}

.small.title {
  font-size: 1.2em;
}

.small.subtitle {
  font-size: 1em;
}

.small.paragraph {
  font-size: 0.8em;
}

.big.title {
  font-size: 4em;
}

.big.subtitle {
  font-size: 3.5em;
}

.big.paragraph {
  font-size: 2em;
}

@media (max-width: 80em) {
  .big.title {
    font-size: 3em;
  }
  .big.subtitle {
    font-size: 2.5em;
  }
  .big.paragraph {
    font-size: 1.5em;
  }
}
@media (max-width: 48em) {
  .big.title {
    font-size: 2em;
  }
  .big.subtitle {
    font-size: 1.8em;
  }
  .big.paragraph {
    font-size: 1.2em;
  }
  .title {
    font-size: 1.3em;
  }
  .subtitle {
    font-size: 1em;
  }
}
@media (max-width: 26em) {
  .title {
    font-size: 1.3em;
  }
  .subtitle {
    font-size: 1.2em;
  }
  p,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 1em;
  }
}
/* roboto-200 - latin */
@font-face {
  font-display: swap;
  font-family: "Roboto";
  font-style: normal;
  font-weight: 200;
  src: local("Roboto") url("/resources/quokka-website/fonts/roboto-v47-latin-200.woff2") format("woff2");
}
/* roboto-200italic - latin */
@font-face {
  font-display: swap;
  font-family: "Roboto";
  font-style: italic;
  font-weight: 200;
  src: local("Roboto") url("/resources/quokka-website/fonts/roboto-v47-latin-200italic.woff2") format("woff2");
}
/* roboto-regular - latin */
@font-face {
  font-display: swap;
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  src: local("Roboto") url("/resources/quokka-website/fonts/roboto-v47-latin-regular.woff2") format("woff2");
}
/* roboto-italic - latin */
@font-face {
  font-display: swap;
  font-family: "Roboto";
  font-style: italic;
  font-weight: 400;
  src: local("Roboto") url("/resources/quokka-website/fonts/roboto-v47-latin-italic.woff2") format("woff2");
}
/* roboto-500 - latin */
@font-face {
  font-display: swap;
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  src: local("Roboto") url("/resources/quokka-website/fonts/roboto-v47-latin-500.woff2") format("woff2");
}
/* roboto-500italic - latin */
@font-face {
  font-display: swap;
  font-family: "Roboto";
  font-style: italic;
  font-weight: 500;
  src: local("Roboto") url("/resources/quokka-website/fonts/roboto-v47-latin-500italic.woff2") format("woff2");
}
/* roboto-mono-200 - latin */
@font-face {
  font-display: swap;
  font-family: "Roboto Mono";
  font-style: normal;
  font-weight: 200;
  src: local("Roboto Mono") url("/resources/quokka-website/fonts/roboto-mono-v23-latin-200.woff2") format("woff2");
}
/* roboto-mono-200italic - latin */
@font-face {
  font-display: swap;
  font-family: "Roboto Mono";
  font-style: italic;
  font-weight: 200;
  src: local("Roboto Mono") url("/resources/quokka-website/fonts/roboto-mono-v23-latin-200italic.woff2") format("woff2");
}
/* roboto-mono-regular - latin */
@font-face {
  font-display: swap;
  font-family: "Roboto Mono";
  font-style: normal;
  font-weight: 400;
  src: local("Roboto Mono") url("/resources/quokka-website/fonts/roboto-mono-v23-latin-regular.woff2") format("woff2");
}
/* roboto-mono-italic - latin */
@font-face {
  font-display: swap;
  font-family: "Roboto Mono";
  font-style: italic;
  font-weight: 400;
  src: local("Roboto Mono") url("/resources/quokka-website/fonts/roboto-mono-v23-latin-italic.woff2") format("woff2");
}
/* roboto-mono-500 - latin */
@font-face {
  font-display: swap;
  font-family: "Roboto Mono";
  font-style: normal;
  font-weight: 500;
  src: local("Roboto Mono") url("/resources/quokka-website/fonts/roboto-mono-v23-latin-500.woff2") format("woff2");
}
/* roboto-mono-500italic - latin */
@font-face {
  font-display: swap;
  font-family: "Roboto Mono";
  font-style: italic;
  font-weight: 500;
  src: local("Roboto Mono") url("/resources/quokka-website/fonts/roboto-mono-v23-latin-500italic.woff2") format("woff2");
}
/* Generated with `quokka_ctl website:dev:convert-helix-syntax` */
:root {
  --let-color-helix--my_gray8: #e8e8e8;
  --let-color-helix--my_white4: #7e7d6a;
  --let-color-helix--my_gray3: #404040;
  --let-color-helix--my_turquoise2: #72a59e;
  --let-color-helix--my_green: #99be70;
  --let-color-helix--my_gray5: #646f69;
  --let-color-helix--my_brown: #cfba8b;
  --let-color-helix--my_turquoise1: #86c1b9;
  --let-color-helix--my_yellow1: #FAD566;
  --let-color-helix--my_yellow2: #ffff9f;
  --let-color-helix--my_white1: #F3F2CC;
  --let-color-helix--my_gray1: #2b2b2b;
  --let-color-helix--my_white2: #F3F2CC;
  --let-color-helix--my_gray4: #646f69;
  --let-color-helix--my_gray2: #323232;
  --let-color-helix--my_gray6: #a8a8a8;
  --let-color-helix--my_black: #212121;
  --let-color-helix--my_red: #F05E48;
  --let-color-helix--my_white3: #F3F2CC;
  --let-color-helix--my_gray0: #232323;
  --let-color-helix--my_gray7: #c8c8c8;
}

.constant.character.escape {
  color: var(--let-color-helix--my_turquoise1);
}

.attribute {
  color: var(--let-color-helix--my_turquoise1);
}

.hint {
  color: var(--let-color-helix--my_gray6);
}

.ui.virtual.inlay-hint.parameter {
  color: var(--let-color-helix--my_gray4);
}

.ui.cursor.primary {
  color: var(--let-color-helix--my_white1);
  direction: rtl;
}

.ui.help {
  color: var(--let-color-helix--my_gray7);
  background-color: var(--let-color-helix--my_gray2);
}

.diagnostic.unnecessary {
  opacity: 0.8;
}

.markup.link.url {
  color: var(--let-color-helix--my_turquoise2);
}

.namespace {
  color: var(--let-color-helix--my_white3);
}

.ui.virtual.jump-label {
  color: var(--let-color-helix--my_yellow2);
  font-weight: bold;
}

.ui.cursorline.primary {
  background-color: var(--let-color-helix--my_black);
}

.ui.popup {
  background-color: var(--let-color-helix--my_gray2);
}

.ui.statusline.insert {
  color: var(--let-color-helix--my_black);
  background-color: var(--let-color-helix--my_gray6);
  font-weight: bold;
}

.special {
  color: var(--let-color-helix--my_yellow1);
}

.ui.virtual.whitespace {
  color: var(--let-color-helix--my_gray6);
}

.ui.debug {
  color: var(--let-color-helix--my_yellow1);
  background-color: var(--let-color-helix--my_gray0);
}

.label {
  color: var(--let-color-helix--my_red);
}

.markup.strikethrough {
  text-decoration: line-through;
}

.ui.gutter {
  background-color: var(--let-color-helix--my_gray0);
}

.markup.italic {
  font-style: italic;
}

.ui.statusline {
  color: var(--let-color-helix--my_gray7);
  background-color: var(--let-color-helix--my_gray2);
}

.constructor {
  color: var(--let-color-helix--my_yellow1);
}

.diff.delta {
  color: var(--let-color-helix--my_gray5);
}

.diagnostic.info {
  text-decoration-line: underline;
}

.ui.cursorline {
  background-color: var(--let-color-helix--my_gray3);
}

.debug {
  color: var(--let-color-helix--my_yellow2);
}

.ui.virtual.inlay-hint.type {
  color: var(--let-color-helix--my_gray4);
  font-style: italic;
}

.diagnostic {
  background-color: var(--let-color-helix--my_black);
  text-decoration-color: var(--let-color-helix--my_gray5);
  text-decoration-line: underline;
}

.diff.minus {
  color: var(--let-color-helix--my_red);
}

.diagnostic.error {
  text-decoration-color: var(--let-color-helix--my_red);
  text-decoration-line: underline;
  text-decoration-style: wavy;
}

.ui.virtual.ruler {
  background-color: var(--let-color-helix--my_gray1);
}

.keyword {
  color: var(--let-color-helix--my_red);
}

.constant {
  color: var(--let-color-helix--my_white3);
}

.ui.cursor.match {
  color: var(--let-color-helix--my_white1);
  background-color: var(--let-color-helix--my_black);
  font-weight: bold;
  text-decoration-color: var(--let-color-helix--my_white1);
  text-decoration-line: underline;
  text-decoration-style: double;
}

.info {
  color: var(--let-color-helix--my_yellow2);
}

.warning {
  color: var(--let-color-helix--my_yellow2);
}

.markup.bold {
  font-weight: bold;
}

.ui.menu {
  color: var(--let-color-helix--my_white1);
  background-color: var(--let-color-helix--my_gray2);
}

.ui.cursorline.secondary {
  background-color: var(--let-color-helix--my_black);
}

.ui.menu.selected {
  color: var(--let-color-helix--my_gray2);
  background-color: var(--let-color-helix--my_gray6);
}

.error {
  color: var(--let-color-helix--my_red);
}

.ui.statusline.select {
  color: var(--let-color-helix--my_gray7);
  background-color: var(--let-color-helix--my_black);
  font-weight: bold;
}

.diagnostic.hint {
  background-color: var(--let-color-helix--my_black);
  text-decoration-color: var(--let-color-helix--my_gray5);
  text-decoration-line: underline;
}

.markup.raw {
  color: var(--let-color-helix--my_green);
}

.variable.other.member {
  color: var(--let-color-helix--my_brown);
}

.ui.statusline.inactive {
  color: var(--let-color-helix--my_gray5);
  background-color: var(--let-color-helix--my_gray2);
}

.function {
  color: var(--let-color-helix--my_yellow1);
}

.ui.statusline.normal {
  color: var(--let-color-helix--my_gray7);
  background-color: var(--let-color-helix--my_gray2);
}

.variable {
  color: var(--let-color-helix--my_white3);
}

.diagnostic.deprecated {
  text-decoration: line-through;
}

.markup.heading {
  color: var(--let-color-helix--my_yellow1);
}

.ui.cursor {
  color: var(--let-color-helix--my_black);
  background-color: var(--let-color-helix--my_white4);
}

.markup.list {
  color: var(--let-color-helix--my_white2);
}

.constant.numeric {
  color: var(--let-color-helix--my_turquoise1);
}

.ui.text {
  color: var(--let-color-helix--my_white1);
}

.ui.window {
  color: var(--let-color-helix--my_gray3);
  background-color: var(--let-color-helix--my_gray2);
}

.ui.background {
  background-color: var(--let-color-helix--my_gray0);
}

.ui.highlight.frameline {
  background-color: #8b6904;
}

.ui.virtual.inlay-hint {
  color: var(--let-color-helix--my_gray4);
  background-color: var(--let-color-helix--my_black);
}

.type {
  color: var(--let-color-helix--my_white3);
  font-style: italic;
}

.comment {
  color: var(--let-color-helix--my_gray5);
}

.ui.virtual.wrap {
  color: var(--let-color-helix--my_gray4);
}

.diff.plus {
  color: var(--let-color-helix--my_green);
}

.markup.link.text {
  color: var(--let-color-helix--my_white2);
}

.operator {
  color: var(--let-color-helix--my_white1);
}

.ui.selection {
  background-color: var(--let-color-helix--my_gray3);
}

.markup.quote {
  color: var(--let-color-helix--my_brown);
}

.ui.text.focus {
  color: var(--let-color-helix--my_white1);
}

.diagnostic.warning {
  text-decoration-color: var(--let-color-helix--my_yellow2);
  text-decoration-line: underline;
  text-decoration-style: wavy;
}

.ui.linenr {
  color: var(--let-color-helix--my_gray3);
  background-color: var(--let-color-helix--my_gray0);
}

.string {
  color: var(--let-color-helix--my_green);
}

.ui.linenr.selected {
  color: var(--let-color-helix--my_gray7);
  background-color: var(--let-color-helix--my_gray0);
}

.markdown p,
.markdown h1,
.markdown h2,
.markdown h3,
.markdown h4,
.markdown h5,
.markdown h6 {
  margin-bottom: 0.5em;
}
.markdown p:not(:first-child),
.markdown h1:not(:first-child),
.markdown h2:not(:first-child),
.markdown h3:not(:first-child),
.markdown h4:not(:first-child),
.markdown h5:not(:first-child),
.markdown h6:not(:first-child) {
  margin-top: 0.75em;
}
.markdown code {
  font-family: "Roboto Mono", monospace;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.9em;
}
.markdown code .ui {
  border-radius: 0.25em;
  padding: 0.5em;
}
.markdown pre:has(code) {
  border: solid 1px black;
  border-radius: 0.5em;
  padding: 0.25em;
}
.markdown .markdown-alert-note {
  background-color: var(--let-color--info-bg);
  color: var(--let-color--info-fg);
  border-left: 3px solid var(--let-color--info-mid);
  padding: 0.5em;
}
.markdown .markdown-alert-tip {
  background-color: var(--let-color--success-bg);
  color: var(--let-color--success-fg);
  border-left: 3px solid var(--let-color--success-mid);
  padding: 0.5em;
}
.markdown .markdown-alert-important {
  background-color: var(--let-color--info-bg);
  color: var(--let-color--info-fg);
  border-left: 3px solid var(--let-color--info-mid);
  padding: 0.5em;
}
.markdown .markdown-alert-warning {
  background-color: var(--let-color--warning-bg);
  color: var(--let-color--warning-fg);
  border-left: 3px solid var(--let-color--warning-mid);
  padding: 0.5em;
}
.markdown .markdown-alert-caution {
  background-color: var(--let-color--critical-bg);
  color: var(--let-color--critical-fg);
  border-left: 3px solid var(--let-color--critical-mid);
  padding: 0.5em;
}
.markdown a[href] {
  font-weight: bold;
  color: var(--let-color--foreground);
}
.markdown a[href]:hover {
  color: var(--let-color--tertiary-foreground);
}
.markdown table {
  border-collapse: collapse;
}
.markdown table th {
  text-align: left;
}
.markdown table td,
.markdown table th {
  padding: 0.5em;
  border: 2px solid;
}

.header {
  padding: 1em;
  background: var(--let-color--primary);
}

.navigation {
  display: flex;
  list-style: none;
  flex-direction: column;
  gap: 0.5em;
}
@media (max-width: 48em) {
  .navigation {
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: row;
    padding: 0 1em;
  }
  .navigation .navigation-item .text {
    padding: 0.5em;
  }
}

.firstpage {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 3em;
}

.teaser {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  gap: 1em;
}
.teaser img {
  width: 40em;
}
.teaser code {
  font-family: "Roboto Mono", monospace;
  border: 2px solid;
  border-radius: 0.25em;
  padding: 0.25em;
  font-size: 1.1em;
}
.teaser code::before {
  content: "> ";
}

.buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1em;
}
.buttons .button a {
  display: inline-block;
  padding: 0.5em;
  border: 2px solid;
  border-radius: 0.5em;
}

.features-teaser {
  margin: auto 0 3em;
  text-align: center;
}

.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1em;
  margin-bottom: 3em;
}
@media (max-width: 48em) {
  .features {
    grid-template-columns: 1fr;
  }
}
.features .features-title {
  text-align: center;
  grid-column-start: 1;
  grid-column-end: 4;
}
@media (max-width: 48em) {
  .features .features-title {
    grid-column-end: 2;
  }
}
.features .feature {
  border: 2px solid;
  border-radius: 0.5em;
  padding: 1em;
}