@charset "UTF-8";
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  min-width: 0;
}

:root {
  --melange_a_bg: #f1f1f1;
  --melange_a_float: #e9e1db;
  --melange_a_sel: #d9d3ce;
  --melange_a_ui: #a98a78;
  --melange_a_com: #7d6658;
  --melange_a_fg: #54433a;
  --melange_b_red: #bf0021;
  --melange_b_yellow: #a06d00;
  --melange_b_green: #3a684a;
  --melange_b_cyan: #3d6568;
  --melange_b_blue: #465aa4;
  --melange_b_magenta: #904180;
  --melange_c_red: #c77b8b;
  --melange_c_yellow: #bc5c00;
  --melange_c_green: #6e9b72;
  --melange_c_cyan: #739797;
  --melange_c_blue: #7892bd;
  --melange_c_magenta: #be79bb;
  --melange_d_red: #f1dedf;
  --melange_d_yellow: #cca478;
  --melange_d_green: #d0e9d1;
  --melange_d_cyan: #cde8e7;
  --melange_d_blue: #e0e2e8;
  --melange_d_magenta: #e8e0e8;
}

@media (prefers-color-scheme: dark) {
  :root {
    --melange_a_bg: #292522;
    --melange_a_float: #34302c;
    --melange_a_sel: #403a36;
    --melange_a_ui: #867462;
    --melange_a_com: #c1a78e;
    --melange_a_fg: #ece1d7;
    --melange_b_red: #d47766;
    --melange_b_yellow: #ebc06d;
    --melange_b_green: #85b695;
    --melange_b_cyan: #89b3b6;
    --melange_b_blue: #a3a9ce;
    --melange_b_magenta: #cf9bc2;
    --melange_c_red: #bd8183;
    --melange_c_yellow: #e49b5d;
    --melange_c_green: #78997a;
    --melange_c_cyan: #7b9695;
    --melange_c_blue: #7f91b2;
    --melange_c_magenta: #b380b0;
    --melange_d_red: #7d2a2f;
    --melange_d_yellow: #8b7449;
    --melange_d_green: #233524;
    --melange_d_cyan: #253333;
    --melange_d_blue: #273142;
    --melange_d_magenta: #422741;
  }
}
:root {
  --color-text: var(--melange_a_fg);
  --color-link: var(--melange_b_blue);
  --color-link-error: var(--melange_c_red);
  --color-link-hover: var(--melange_b_yellow);
  --color-background: var(--melange_a_bg);
  --color-footer-background: var(--melange_a_float);
  --color-hr: var(--melange_a_ui);
  --color-footnote-def: var(--melange_a_com);
  --color-highlight: var(--melange_b_red);
  --color-blockquote-bar: var(--color-highlight);
  --color-list-bullet: var(--color-highlight);
  --color-tags: var(--melange_b_cyan);
  --color-tags-hover: var(--melange_b_yellow);
  --color-highlight-archive: var(--melange_d_yellow);
  --color-highlight-tags: var(--melange_c_cyan);
  --color-highlight-series: var(--melange_b_red);
  --color-highlight-projects: var(--melange_c_cyan);
  --color-highlight-about: var(--melange_c_magenta);
  --color-highlight-drafts: var(--color-highlight-archive);
  --color-highlight-favorite: var(--melange_c_yellow);
  --color-series-completed: var(--melange_c_blue);
  --color-series-ongoing: var(--melange_c_red);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-footer-background: #1d1c19;
  }
}
@font-face {
  font-family: century_supra_a;
  font-style: normal;
  font-weight: normal;
  font-stretch: normal;
  font-display: auto;
  src: url("/fonts/century_supra_a_regular.woff2") format("woff2");
}
@font-face {
  font-family: century_supra_a;
  font-style: italic;
  font-weight: normal;
  font-stretch: normal;
  font-display: auto;
  src: url("/fonts/century_supra_a_italic.woff2") format("woff2");
}
@font-face {
  font-family: century_supra_a;
  font-style: normal;
  font-weight: bold;
  font-stretch: normal;
  font-display: auto;
  src: url("/fonts/century_supra_a_bold.woff2") format("woff2");
}
@font-face {
  font-family: century_supra_a;
  font-style: italic;
  font-weight: bold;
  font-stretch: normal;
  font-display: auto;
  src: url("/fonts/century_supra_a_bold_italic.woff2") format("woff2");
}
@font-face {
  font-family: concourse_4;
  font-style: normal;
  font-weight: normal;
  font-stretch: normal;
  font-display: auto;
  src: url("/fonts/concourse_4_regular.woff2") format("woff2");
}
@font-face {
  font-family: concourse_4;
  font-style: italic;
  font-weight: normal;
  font-stretch: normal;
  font-display: auto;
  src: url("/fonts/concourse_4_italic.woff2") format("woff2");
}
@font-face {
  font-family: concourse_4;
  font-style: normal;
  font-weight: bold;
  font-stretch: normal;
  font-display: auto;
  src: url("/fonts/concourse_4_bold.woff2") format("woff2");
}
@font-face {
  font-family: concourse_4;
  font-style: italic;
  font-weight: bold;
  font-stretch: normal;
  font-display: auto;
  src: url("/fonts/concourse_4_bold_italic.woff2") format("woff2");
}
@font-face {
  font-family: iosevka_tree;
  src: url("/fonts/iosevka-tree-regular.woff2") format("woff2");
  font-style: normal;
}
@font-face {
  font-family: iosevka_tree;
  src: url("/fonts/iosevka-tree-italic.woff2") format("woff2");
  font-style: italic;
}
@font-face {
  font-family: iosevka_tree;
  src: url("/fonts/iosevka-tree-bold.woff2") format("woff2");
  font-style: normal;
  font-weight: bold;
}
@font-face {
  font-family: iosevka_tree;
  src: url("/fonts/iosevka-tree-bolditalic.woff2") format("woff2");
  font-style: italic;
  font-weight: bold;
}
/* @link https://utopia.fyi/type/calculator?c=320,18,1.2,1240,20,1.25,6,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
/* @link https://utopia.fyi/space/calculator?c=320,18,1.2,1240,20,1.25,6,2,&s=0.75|0.5|0.25,1.5|2|3|4|6|8|12|16|24|32|40|48,s-l&g=s,l,xl,12 */
:root {
  /* Space 3xs: 5px → 5px */
  --space-3xs: clamp(0.31rem, calc(0.31rem + 0vw), 0.31rem);
  /* Space 2xs: 9px → 10px */
  --space-2xs: clamp(0.56rem, calc(0.54rem + 0.11vw), 0.63rem);
  /* Space xs: 14px → 15px */
  --space-xs: clamp(0.88rem, calc(0.85rem + 0.11vw), 0.94rem);
  /* Space s: 18px → 20px */
  --space-s: clamp(1.13rem, calc(1.08rem + 0.22vw), 1.25rem);
  /* Space m: 27px → 30px */
  --space-m: clamp(1.69rem, calc(1.62rem + 0.33vw), 1.88rem);
  /* Space l: 36px → 40px */
  --space-l: clamp(2.25rem, calc(2.16rem + 0.43vw), 2.5rem);
  /* Space xl: 54px → 60px */
  --space-xl: clamp(3.38rem, calc(3.24rem + 0.65vw), 3.75rem);
  /* Space 2xl: 72px → 80px */
  --space-2xl: clamp(4.5rem, calc(4.33rem + 0.87vw), 5rem);
  /* Space 3xl: 108px → 120px */
  --space-3xl: clamp(6.75rem, calc(6.49rem + 1.3vw), 7.5rem);
  /* Space 4xl: 144px → 160px */
  --space-4xl: clamp(9rem, calc(8.65rem + 1.74vw), 10rem);
  /* Space 5xl: 216px → 240px */
  --space-5xl: clamp(13.5rem, calc(12.98rem + 2.61vw), 15rem);
  /* Space 6xl: 288px → 320px */
  --space-6xl: clamp(18rem, calc(17.3rem + 3.48vw), 20rem);
  /* Space 7xl: 432px → 480px */
  --space-7xl: clamp(27rem, calc(25.96rem + 5.22vw), 30rem);
  /* Space 8xl: 576px → 640px */
  --space-8xl: clamp(36rem, calc(34.61rem + 6.96vw), 40rem);
  /* Space 9xl: 720px → 800px */
  --space-9xl: clamp(45rem, calc(43.26rem + 8.7vw), 50rem);
  /* Space 10xl: 864px → 960px */
  --space-10xl: clamp(54rem, calc(51.91rem + 10.43vw), 60rem);
  /* One-up pairs */
  /* Space 3xs-2xs: 5px → 10px */
  --space-3xs-2xs: clamp(0.31rem, calc(0.2rem + 0.54vw), 0.63rem);
  /* Space 2xs-xs: 9px → 15px */
  --space-2xs-xs: clamp(0.56rem, calc(0.43rem + 0.65vw), 0.94rem);
  /* Space xs-s: 14px → 20px */
  --space-xs-s: clamp(0.88rem, calc(0.74rem + 0.65vw), 1.25rem);
  /* Space s-m: 18px → 30px */
  --space-s-m: clamp(1.13rem, calc(0.86rem + 1.3vw), 1.88rem);
  /* Space m-l: 27px → 40px */
  --space-m-l: clamp(1.69rem, calc(1.4rem + 1.41vw), 2.5rem);
  /* Space l-xl: 36px → 60px */
  --space-l-xl: clamp(2.25rem, calc(1.73rem + 2.61vw), 3.75rem);
  /* Space xl-2xl: 54px → 80px */
  --space-xl-2xl: clamp(3.38rem, calc(2.81rem + 2.83vw), 5rem);
  /* Space 2xl-3xl: 72px → 120px */
  --space-2xl-3xl: clamp(4.5rem, calc(3.46rem + 5.22vw), 7.5rem);
  /* Space 3xl-4xl: 108px → 160px */
  --space-3xl-4xl: clamp(6.75rem, calc(5.62rem + 5.65vw), 10rem);
  /* Space 4xl-5xl: 144px → 240px */
  --space-4xl-5xl: clamp(9rem, calc(6.91rem + 10.43vw), 15rem);
  /* Space 5xl-6xl: 216px → 320px */
  --space-5xl-6xl: clamp(13.5rem, calc(11.24rem + 11.3vw), 20rem);
  /* Space 6xl-7xl: 288px → 480px */
  --space-6xl-7xl: clamp(18rem, calc(13.83rem + 20.87vw), 30rem);
  /* Space 7xl-8xl: 432px → 640px */
  --space-7xl-8xl: clamp(27rem, calc(22.48rem + 22.61vw), 40rem);
  /* Space 8xl-9xl: 576px → 800px */
  --space-8xl-9xl: clamp(36rem, calc(31.13rem + 24.35vw), 50rem);
  /* Space 9xl-10xl: 720px → 960px */
  --space-9xl-10xl: clamp(45rem, calc(39.78rem + 26.09vw), 60rem);
}

/* Fluid font size variables, for browsers that support clamp */
@supports (font-size: clamp(1rem, 1vw, 1rem)) {
  :root {
    --font-size-2xs: clamp(0.51rem, 0.03vw + 0.5rem, 0.53rem);
    --font-size-xs: clamp(0.64rem, 0.12vw + 0.61rem, 0.7rem);
    --font-size-s: clamp(0.8rem, 0.25vw + 0.74rem, 0.94rem);
    --font-size-m: clamp(1rem, 0.45vw + 0.89rem, 1.25rem);
    --font-size-l: clamp(1.25rem, 0.76vw + 1.06rem, 1.67rem);
    --font-size-xl: clamp(1.56rem, 1.2vw + 1.26rem, 2.22rem);
    --font-size-2xl: clamp(1.95rem, 1.83vw + 1.5rem, 2.96rem);
    --font-size-3xl: clamp(2.44rem, 2.74vw + 1.76rem, 3.95rem);
    --font-size-m-code: clamp(0.6rem, 0.25vw + 0.8rem, 1.1rem);
  }
}
/* Fallback variables for browsers that don't support clamp */
@supports not (font-size: clamp(1rem, 1vw, 1rem)) {
  :root {
    --font-size-2xs: 0.51rem;
    --font-size-xs: 0.64rem;
    --font-size-s: 0.8rem;
    --font-size-m: 1rem;
    --font-size-l: 1.25rem;
    --font-size-xl: 1.56rem;
    --font-size-2xl: 1.95rem;
    --font-size-3xl: 2.44rem;
    --font-size-m-code: 0.6rem;
  }
  @media screen and (min-width: 1280px) {
    :root {
      --font-size-2xs: 0.53rem;
      --font-size-xs: 0.7rem;
      --font-size-s: 0.94rem;
      --font-size-m: 1.25rem;
      --font-size-l: 1.67rem;
      --font-size-xl: 2.22rem;
      --font-size-2xl: 2.96rem;
      --font-size-3xl: 3.95rem;
      --font-size-m-code: 1.1rem;
    }
  }
}
img,
svg {
  max-inline-size: 100%;
}

body {
  text-rendering: optimizeLegibility;
  font-family: century_supra_a, Georgia, serif;
  font-feature-settings: "kern" on;
  font-size: var(--font-size-m);
  line-height: calc(2px + 2ex + 2px);
  line-height: 1.4;
  color: var(--color-text);
  background-color: var(--color-background);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
body a {
  color: var(--color-link);
}
body a:hover {
  color: var(--color-link-hover);
}

h1 {
  font-size: var(--font-size-2xl);
  line-height: calc(2px + 2ex + 2px);
}

h2 {
  font-size: var(--font-size-xl);
  line-height: calc(2px + 2ex + 2px);
}

h3 {
  font-size: var(--font-size-l);
  line-height: calc(2px + 2ex + 2px);
}

h4 {
  font-size: var(--font-size-m);
  line-height: calc(2px + 2ex + 2px);
}

h5,
h6,
h7 {
  font-size: var(--font-size-m);
  line-height: calc(2px + 2ex + 2px);
}

h1,
h2,
h3,
h4,
h5,
h6,
h7 {
  text-rendering: optimizeLegibility;
  font-family: concourse_4, Helvetica, sans-serif;
  font-feature-settings: "ss06" on, "onum" off, "kern" on;
}
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a,
h7 a {
  color: var(--color-text);
  text-decoration: none;
}
h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover,
h6 a:hover,
h7 a:hover {
  text-decoration: underline;
}

:root {
  --measure: 60ch;
  --overflow-measure: 70ch;
  --overflow-size: calc((var(--overflow-measure) - var(--measure)) / 2);
  --flow-space: var(--space-xs);
  --flow-hspace: var(--space-xs);
}

* {
  max-inline-size: var(--measure);
}

html,
body,
div,
header,
nav,
main,
footer,
pre code,
pre {
  max-inline-size: none;
}

.max-inline-size-measure {
  max-inline-size: var(--measure);
}

.max-inline-size-measure-2 {
  max-inline-size: calc(var(--eeasure) / 2);
}

hr {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--color-hr);
}

code > .line.hl {
  background-color: var(--melange_a_sel);
}

code > .line[data-linenum]::before {
  content: attr(data-linenum);
  padding-right: var(--space-2xs);
  color: var(--melange_a_ui);
}

code {
  background-color: var(--melange_a_float);
}

pre,
pre code {
  background-color: var(--melange_a_float);
}

code,
pre {
  color: var(--melange_a_fg);
}

.code-wrapper:has(.descr) {
  margin-top: 1rem;
}

.code-wrapper .descr {
  --pad: 1.2rem;
  display: flex;
  justify-content: right;
  align-items: flex-start;
}
.code-wrapper .descr::before {
  margin-block-start: calc(var(--flow-space) - (2ch + 2 * var(--space-xs)));
  font-size: var(--font-size-s);
  line-height: calc(2px + 2ex + 2px);
  font-family: iosevka_tree, monospace;
  color: var(--melange_a_ui);
  background-color: var(--melange_a_float);
  padding: calc(var(--space-3xs) - 2px) var(--space-xs);
  position: relative;
  top: var(--pad);
  left: calc(-1 * var(--pad));
  border-radius: var(--space-3xs) var(--space-3xs) 0 0;
  content: attr(data-descr);
}

.constant {
  color: var(--melange_c_magenta);
}

.keyword.operator.comparison,
.keyword.operator,
.keyword.operator.symbolic,
.keyword.operator.string,
.keyword.operator.assignment,
.keyword.operator.arithmetic,
.keyword.operator.class,
.keyword.operator.key,
.keyword.operator.logical {
  color: var(--melange_b_red);
}

.keyword,
.keyword.operator.new,
.keyword.other,
.keyword.control,
.keyword.control .punctuation {
  color: var(--melange_c_yellow);
}

.storage {
  color: var(--melange_c_cyan);
}

.string,
.string.unquoted.heredoc .string,
.punctuation.definition.string {
  color: var(--melange_b_blue);
  font-style: italic;
}

.comment {
  color: var(--melange_a_com);
  font-style: italic;
}

.string.regexp {
  color: var(--melange_b_blue);
}

.string.regexp .constant.character.escape {
  color: var(--melange_b_blue);
}

.variable.language {
  color: var(--melange_b_red);
}

.meta.function-call {
  color: var(--melange_b_yellow);
}

.meta.object {
  color: var(--melange_a_fg);
}

.support.function,
.entity.name.function {
  color: var(--melange_b_yellow);
}

.entity.name.tag {
  color: var(--melange_b_yellow);
  font-weight: bold;
}

.entity.name.tag.toml {
  color: var(--melange_a_fg);
}

.function.return-type {
  color: var(--melange_c_cyan);
}

.entity.name.type {
  color: var(--melange_c_cyan);
}

.meta.tag,
.meta.tag .entity.name.table {
  color: var(--melange_c_green);
}

.meta.selector.css .entity.name.tag {
  color: var(--melange_b_yellow);
  font-weight: normal;
}

.meta.selector.css .entity.other.attribute-name.class {
  color: var(--melange_c_cyan);
}

.support.type.property-name.css {
  color: var(--melange_a_fg);
}

.support.type.custom-property.css :is(.name, .punctuation) {
  color: var(--melange_c_blue);
  font-style: italic;
}

.punctuation.css {
  color: var(--melange_c_red);
}

.meta.preprocessor,
.meta.preprocessor .keyword.control {
  color: var(--melange_b_green);
}

.meta.attribute-with-value {
  color: var(--melange_b_cyan);
}

.punctuation.tag,
.punctuation.definition,
.punctuation.section {
  color: var(--melange_a_ui);
}

.link.reference.markdown .other,
.link.reference.def.markdown .entity.name {
  color: var(--melange_c_cyan);
}

.link.reference.def.markdown .link,
.link.inline.markdown .link {
  color: var(--melange_b_blue);
}

.markup.underline {
  text-decoration: underline;
}

.entity.custom-property,
.variable.custom-property {
  color: var(--melange_b_blue);
}

.function-call.c {
  color: var(--melange_a_fg);
}

.function-call.c .variable.function {
  color: var(--melange_b_yellow);
}

.function-call.fish .keyword.control .string.unquoted {
  color: var(--melange_c_yellow);
  font-style: normal;
}

.function-call.parameter.fish .string.unquoted {
  color: var(--melange_a_com);
  font-style: normal;
}

.meta.function-call.arguments.shell {
  color: var(--melange_a_fg);
  font-style: normal;
}

.function-call.name.fish .function .string,
.function-call.shell .function {
  color: var(--melange_b_yellow);
  font-style: normal;
}

.support.macro {
  color: var(--melange_b_cyan);
}

.storage.type.rust {
  color: var(--melange_c_yellow);
}

.support.type.rust {
  color: var(--melange_c_magenta);
}

.storage.type.function.rust {
  color: var(--melange_c_green);
}

.storage.modifier {
  color: var(--melange_c_yellow);
}

.variable.parameter.rust {
  color: var(--melange_a_fg);
}

.meta.function {
  color: var(--melange_a_fg);
}

.entity.name {
  color: var(--melange_c_green);
}

.rust .punctuation {
  color: var(--melange_a_ui);
}

.punctuation.accessor {
  color: var(--melange_c_yellow);
}

.named-arg.racket,
.named-arg.pollen {
  color: var(--melange_c_magenta);
}

.function.magic,
.magic.begin.pollen,
.magic.end.pollen {
  color: var(--melange_c_yellow);
}

.punctuation.definition.variable.sass {
  color: var(--melange_a_fg);
}

.support.function.viml {
  color: var(--melange_c_yellow);
}

.support.type.viml {
  color: var(--melange_a_com);
}

.meta.import.gleam .keyword.other.gleam {
  color: var(--melange_b_green);
}

.string.quoted.gleam .punctuation.definition {
  color: var(--melange_b_blue);
}

.keyword.control.module.elixir:first-child {
  color: var(--melange_b_green);
}

.meta.module.elixir .entity.name {
  color: var(--melange_b_cyan);
}

.entity.name.class.elixir {
  color: var(--melange_b_cyan);
}

.string.quoted.elixir .punctuation.definition {
  color: var(--melange_b_blue);
}

.constant.other.symbol.elixir {
  color: var(--melange_b_cyan);
}

.constant.other.symbol.elixir .punctuation.definition {
  color: var(--melange_b_cyan);
}

.punctuation.separator.method.elixir {
  color: var(--melange_b_red);
}

.keyword.import.js {
  color: var(--melange_b_green);
}

.keyword.declaration.function.js {
  color: var(--melange_b_green);
}

.punctuation.bracket {
  color: var(--melange_d_yellow);
}

.type {
  color: var(--melange_c_cyan);
}

.operator {
  color: var(--melange_b_red);
}

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

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

.punctuation.delimiter {
  color: var(--melange_c_red);
}

.punctuation.special {
  color: var(--melange_a_ui);
}

.tag.attribute,
.label {
  color: var(--melange_b_cyan);
}

.djot .attribute {
  color: var(--melange_b_cyan);
}

.markup.heading,
.text.title {
  color: var(--melange_c_yellow);
}

.markup.heading.\31  {
  color: var(--melange_c_yellow);
}

.markup.heading.\32  {
  color: var(--melange_c_magenta);
}

.markup.heading.\33  {
  color: var(--melange_c_green);
}

.markup.heading.\34  {
  color: var(--melange_c_blue);
}

.markup.heading.\35  {
  color: var(--melange_c_cyan);
}

.markup.heading.\36  {
  color: var(--melange_c_red);
}

.markup {
  color: var(--melange_a_fg);
}

.markup.highlighted {
  color: var(--melange_b_yellow);
}

.markup.insert {
  text-decoration: underline;
}

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

.markup.superscript,
.markup.subscript {
  color: var(--melange_b_blue);
  font-style: italic;
}

.markup.symbol {
  color: var(--melange_b_cyan);
}

.markup.math,
.markup.caption {
  font-style: italic;
}

.markup.link.label {
  color: var(--melange_b_cyan);
}

.markup.link.reference,
.markup.link.definition {
  color: var(--melange_c_magenta);
}

.markup.link.url {
  color: var(--melange_c_blue);
}

.markup.footnote.definition,
.markup.footnote.reference {
  color: var(--melange_b_yellow);
}

.markup.todo,
.markup.note,
.markup.fixme {
  color: var(--melange_a_com);
}

.markup.list {
  color: var(--melange_d_yellow);
}

.markup.raw {
  color: var(--melange_a_com);
}

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

.markup.quote {
  color: var(--melange_a_com);
  font-style: italic;
}

.tag {
  color: var(--melange_b_yellow);
}

.define {
  color: var(--melange_b_green);
}

.function {
  color: var(--melange_b_yellow);
}

.function.macro {
  color: var(--melange_b_green);
}

.variable {
  color: var(--melange_a_fg);
}

.number {
  color: var(--melange_c_magenta);
}

.boolean {
  color: var(--melange_c_magenta);
}

.highlight.fennel .string .punctuation,
.highlight.fennel .string .variable,
.highlight.fennel .string .operator {
  color: var(--melange_b_blue);
}

body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
body > footer {
  flex-grow: 1;
}

.site-header {
  text-rendering: optimizeLegibility;
  font-family: concourse_4, Helvetica, sans-serif;
  font-feature-settings: "ss06" on, "onum" off, "kern" on;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-block-end: var(--space-xs);
}

.site-header a,
.site-header a:hover {
  text-decoration: none;
}

.nav-wrapper {
  flex: 1;
  max-inline-size: var(--overflow-measure);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: baseline;
}

.nav-wrapper nav a {
  color: var(--color-text);
}
.nav-wrapper nav a.archive.highlight {
  border-bottom: 2px solid var(--color-highlight-archive);
}
.nav-wrapper nav a.series.highlight {
  border-bottom: 2px solid var(--color-highlight-series);
}
.nav-wrapper nav a.projects.highlight {
  border-bottom: 2px solid var(--color-highlight-projects);
}
.nav-wrapper nav a.drafts.highlight {
  border-bottom: 2px solid var(--color-highlight-drafts);
}
.nav-wrapper nav a.contact.highlight {
  border-bottom: 2px solid var(--color-highlight-contact);
}
.nav-wrapper nav a.about.highlight {
  border-bottom: 2px solid var(--color-highlight-about);
}
.nav-wrapper nav a:hover {
  color: var(--color-link-hover);
}

.nav-wrapper nav ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: baseline;
}

.nav-wrapper nav li {
  list-style: none;
}

.nav-wrapper nav ul > * + * {
  margin-inline-start: var(--flow-hspace);
  --flow-hspace: var(--space-2xs);
}

.nav-wrapper .site-title {
  font-size: var(--font-size-m);
  line-height: calc(2px + 2ex + 2px);
  font-style: italic;
  margin-block: var(--space-3xs);
}
.nav-wrapper .site-title > a {
  color: var(--color-text);
  color: var(--melange_a_ui);
}
.nav-wrapper .site-title > a:hover {
  color: var(--color-link-hover);
}

.main-content {
  margin: var(--space-2xs);
}

body > footer {
  display: grid;
  grid-template-columns: 1fr minmax(auto, var(--measure)) 1fr;
  row-gap: var(--space-xs);
  background-color: var(--color-footer-background);
  grid-auto-rows: min-content;
  margin-block-start: var(--space-l);
  padding-block: var(--space-m);
  text-rendering: optimizeLegibility;
  font-family: concourse_4, Helvetica, sans-serif;
  font-feature-settings: "ss06" on, "onum" off, "kern" on;
}
body > footer a {
  color: var(--color-text);
  color: var(--melange_a_com);
  text-decoration: none;
}
body > footer a:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}
body > footer > * {
  grid-column: 2;
}
body > footer .upper {
  flex: 1;
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  flex-direction: row;
  max-inline-size: var(--overflow-measure);
}
body > footer nav ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: normal;
}
body > footer nav li {
  list-style: none;
}
body > footer nav ul > * + * {
  margin-block-start: var(--flow-space);
  --flow-space: var(--space-3xs);
}
body > footer .lower {
  font-size: var(--font-size-s);
  line-height: calc(2px + 2ex + 2px);
  text-align: center;
}
body > footer .lower a {
  text-decoration: underline;
}

article {
  display: grid;
  grid-template-columns: 1fr minmax(0, var(--overflow-size)) min(var(--measure), 100%) minmax(0, var(--overflow-size)) 1fr;
  max-inline-size: none;
  row-gap: var(--flow-space);
  /*
 * General setup
 */
  /*
 * Code
 */
  /*
 * Quotes
 */
  /*
 * Tables
 */
  /*
 * Horizontal rules
 */
  /*
 * Lists
 */
  /*
 * Images
 */
  /*
 * Aside/notice
 */
  /*
 * todo comments
 */
  /*
 * YouTube embedding with thumbnail + link instead of iframe.
 */
  /*
 * Footnotes
 */
  /*
 * Changelog
 */
}
article > * {
  grid-column: 3;
}
article section {
  width: 100%;
  grid-column: 1/-1 !important;
  max-inline-size: none;
  display: grid;
  grid-template-columns: 1fr minmax(0, var(--overflow-size)) min(var(--measure), 100%) minmax(0, var(--overflow-size)) 1fr;
  max-inline-size: none;
  row-gap: var(--flow-space);
}
article section > * {
  grid-column: 3;
}
article a {
  word-wrap: break-word;
}
article h1 > a:not(:first-of-type),
article h2 > a:not(:first-of-type),
article h3 > a:not(:first-of-type),
article h4 > a:not(:first-of-type),
article h5 > a:not(:first-of-type),
article h6 > a:not(:first-of-type),
article h7 > a:not(:first-of-type) {
  text-decoration: underline;
}
article h1:not(:first-child),
article h2:not(:first-child),
article h3:not(:first-child),
article h4:not(:first-child),
article h5:not(:first-child),
article h6:not(:first-child),
article h7:not(:first-child) {
  margin-block-start: var(--space-xs);
}
article h1 .favorite {
  display: inline-block;
  position: relative;
  top: -3px;
  vertical-align: baseline;
}
article h1 .favorite,
article h1 .favorite a {
  color: var(--color-highlight-favorite);
}
article h1 .favorite a:hover {
  color: var(--color-link-hover);
}
article span.favorite {
  display: inline-block;
  position: relative;
  top: -2px;
  vertical-align: baseline;
}
article span.favorite,
article span.favorite a {
  color: var(--color-highlight-favorite);
  text-decoration: none;
}
article span.favorite a:hover {
  color: var(--color-link-hover);
}
article section > :is(h1, h2, h3, h4, h5, h6, h7):first-child {
  margin-block-start: calc(var(--space-m) - var(--flow-space));
}
article .post-info,
article .series-info {
  text-rendering: optimizeLegibility;
  font-family: concourse_4, Helvetica, sans-serif;
  font-feature-settings: "ss06" on, "onum" off, "kern" on;
  font-size: var(--font-size-s);
  line-height: calc(2px + 2ex + 2px);
  gap: var(--space-3xs) var(--space-2xs);
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  align-items: baseline;
  margin-block-start: var(--space-3xs);
}
article .post-info .draft {
  color: var(--color-highlight);
  color: var(--melange_b_red);
  text-decoration: underline;
  margin-right: -2px;
}
article .post-info .item-spec {
  color: var(--melange_a_ui);
}
article time a {
  text-decoration: underline;
  color: var(--color-text);
}
article time a:hover {
  text-decoration: underline;
  color: var(--color-link-hover);
}
article .tag-links {
  text-rendering: optimizeLegibility;
  font-family: concourse_4, Helvetica, sans-serif;
  font-feature-settings: "ss06" on, "onum" off, "kern" on;
  font-size: var(--font-size-s);
  line-height: calc(2px + 2ex + 2px);
}
article .tag-links a {
  color: var(--color-tags);
}
article .tag-links a:hover {
  color: var(--color-tags-hover);
}
article a:not([href]) {
  color: var(--color-link-error);
}
article pre,
article code {
  font-family: iosevka_tree, monospace;
  font-size: var(--font-size-m-code);
}
article pre code {
  padding: 0;
  width: 100%;
}
article .code-wrapper.wide {
  width: 100%;
  grid-column: 2/5 !important;
  max-inline-size: none;
}
article pre code > .line {
  padding-inline: var(--space-xs);
}
article pre {
  padding-block: var(--space-xs);
  overflow-wrap: normal;
  overflow: auto;
}
article code {
  padding: 0.2rem;
  margin: 0;
}
article blockquote {
  font-size: 95%;
  padding-inline-start: var(--space-m);
  padding-block: var(--space-2xs);
}
article blockquote > * + * {
  margin-block-start: var(--flow-space);
}
article blockquote {
  border-left: 3px solid var(--color-blockquote-bar);
}
article .epigraph {
  margin-block: var(--space-m);
  font-style: italic;
}
article .epigraph > blockquote {
  border-left: 0px;
}
article blockquote > footer {
  font-size: 80%;
  text-align: right;
}
article table {
  text-rendering: optimizeLegibility;
  font-family: century_supra_a, Georgia, serif;
  font-feature-settings: "kern" on;
  font-feature-settings: "kern" on, "tnum" on;
}
article th,
article td {
  padding: var(--space-3xs) var(--space-s) var(--space-3xs) 0;
}
article table.movie-table {
  width: 100%;
}
article table.movie-table td:first-of-type {
  width: 25ch;
}
article table.center {
  margin: 0 auto;
}
article div.center {
  text-align: center;
}
article hr {
  margin: var(--space-m) 0 calc(var(--space-m) - var(--space-xs)) 0;
}
article :is(ol, ul):not(:has(p)) > * + * {
  margin-block-start: var(--flow-space);
  --flow-space: var(--space-2xs);
}
article :is(ol, ul):has(p) > * + * {
  margin-block-start: var(--flow-space);
  --flow-space: var(--space-xs);
}
article li > * + * {
  margin-block-start: var(--flow-space);
}
article ul,
article ol {
  list-style: none;
  margin-left: var(--space-m);
}
article ol {
  counter-reset: ordered-counter;
}
article div:is(.plus, .dash) ~ div:is(.plus, .dash) {
  margin-top: calc(-0.5 * var(--space-2xs));
}
article :is(ol, ul) > li::before {
  float: left;
  margin-left: calc(-1 * var(--space-m));
  color: var(--color-list-bullet);
}
article ol > li::before {
  text-rendering: optimizeLegibility;
  font-family: concourse_4, Helvetica, sans-serif;
  font-feature-settings: "ss06" on, "onum" off, "kern" on;
  counter-increment: ordered-counter;
  content: counter(ordered-counter);
}
article ol[type=A s] > li::before {
  content: counter(ordered-counter, upper-alpha);
}
article ol[type=a s] > li::before {
  content: counter(ordered-counter, lower-alpha);
}
article ol[type=I s] > li::before {
  content: counter(ordered-counter, upper-roman);
}
article ol[type=i s] > li::before {
  content: counter(ordered-counter, lower-roman);
}
article .greek ol[type=a s] > li::before {
  content: counter(ordered-counter, lower-greek);
}
article ul > li::before {
  text-rendering: optimizeLegibility;
  font-family: concourse_4, Helvetica, sans-serif;
  font-feature-settings: "ss06" on, "onum" off, "kern" on;
  content: "•";
}
article .dash ul > li::before {
  content: "-";
}
article .plus ul > li::before {
  content: "+";
}
article ul > li.checked::before {
  text-rendering: optimizeLegibility;
  font-family: concourse_4, Helvetica, sans-serif;
  font-feature-settings: "ss06" on, "onum" off, "kern" on;
  content: "[×]";
}
article ul > li.unchecked::before {
  text-rendering: optimizeLegibility;
  font-family: concourse_4, Helvetica, sans-serif;
  font-feature-settings: "ss06" on, "onum" off, "kern" on;
  content: "[ ]";
}
article .toc {
  padding-block-start: var(--space-2xs);
  padding-block-end: var(--space-2xs);
  border-width: 0;
  border-top-width: 1px;
  border-bottom-width: 1px;
  border-style: solid;
  border-color: var(--color-hr);
}
article .toc nav {
  margin: var(--space-2xs) var(--space-s);
  --flow-space: 0;
}
article .toc ol {
  margin-left: 0;
}
article .toc ol > * + * {
  margin-block-start: var(--flow-space);
  --flow-space: var(--space-3xs);
}
article .toc ol > li:before {
  margin-left: 0;
  content: none;
}
article .toc a {
  text-rendering: optimizeLegibility;
  font-family: concourse_4, Helvetica, sans-serif;
  font-feature-settings: "ss06" on, "onum" off, "kern" on;
}
article .toc summary:hover {
  cursor: pointer;
  color: var(--color-link-hover);
  text-decoration: underline;
}
article .toc a:link,
article .toc a:visited {
  color: var(--color-text);
  text-decoration: none;
}
article .toc a:hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}
article .toc a.heading-1 {
  font-weight: bold;
}
article .toc a.heading-2 {
  margin-left: var(--space-xs);
  font-size: 90%;
}
article .toc:not(:first-child) ~ section > h2:first-child {
  margin-block-start: var(--space-xs);
}
article .toc:first-child ~ section > h2:first-child {
  margin-block-start: 0;
}
article img,
article svg {
  max-width: 100%;
}
article figure svg {
  width: 100%;
}
@media (prefers-color-scheme: dark) {
  article img:not(.play-button) {
    background-color: #f1f1f1;
  }
}
article figure figcaption {
  overflow-wrap: break-word;
}
article figure {
  width: 100%;
  grid-column: 2/5 !important;
  max-inline-size: none;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
article figure:not(:is(.flex-50, .flex-33, .flex-25, .flex-20)) {
  gap: var(--space-3xs);
}
article figure figcaption {
  font-style: italic;
  width: 100%;
}
article figure.flex-50 > *,
article figure.flex-33 > *,
article figure.flex-25 > *,
article figure.flex-20 > * {
  padding-inline: 0.1em;
}
article figure.flex-50 img,
article figure.flex-33 img,
article figure.flex-25 img,
article figure.flex-20 img {
  background-color: none;
}
article figure.flex-50 a,
article figure.flex-50 img {
  flex: 0 1 50%;
}
article figure.flex-33 a,
article figure.flex-33 img {
  flex: 0 1 33%;
}
article figure.flex-25 a,
article figure.flex-25 img {
  flex: 0 1 25%;
}
article figure.flex-20 a,
article figure.flex-20 img {
  flex: 0 1 20%;
}
article figure.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: var(--space-3xs);
}
article figure.gallery > figcaption {
  grid-column: 1/-1 !important;
  max-inline-size: none;
  display: flex;
  justify-content: center;
}
article aside {
  font-size: 95%;
  padding-inline-start: var(--space-m);
  padding-block-start: var(--space-3xs);
  padding-block-end: var(--space-2xs);
  display: flex;
  flex-direction: column;
  border-width: 0;
  border-left-width: 3px;
  border-style: solid;
}
article aside > * + * {
  margin-block-start: var(--flow-space);
}
article aside::before {
  text-rendering: optimizeLegibility;
  font-family: concourse_4, Helvetica, sans-serif;
  font-feature-settings: "ss06" on, "onum" off, "kern" on;
  margin-block-end: var(--space-2xs);
}
article aside.note {
  border-color: var(--melange_b_blue);
}
article aside.note::before {
  content: "Note";
  color: var(--melange_b_blue);
}
article aside.tip {
  border-color: var(--melange_b_green);
}
article aside.tip::before {
  content: "Tip";
  color: var(--melange_b_green);
}
article aside.warn {
  border-color: var(--melange_b_yellow);
}
article aside.warn::before {
  content: "Warning";
  color: var(--melange_b_yellow);
}
article aside.important {
  border-color: var(--melange_b_magenta);
}
article aside.important::before {
  content: "Important";
  color: var(--melange_b_magenta);
}
article aside.update {
  border-color: var(--melange_c_cyan);
}
article aside.update .info {
  color: var(--melange_b_cyan);
}
article aside.update .info .date {
  margin-left: var(--space-3xs);
  text-rendering: optimizeLegibility;
  font-family: concourse_4, Helvetica, sans-serif;
  font-feature-settings: "ss06" on, "onum" off, "kern" on;
  font-size: 90%;
  color: var(--melange_c_cyan);
}
article span.todo,
article span.fixme,
article span.note {
  color: var(--melange_a_bg);
  padding: var(--space-3xs);
}
article span.todo {
  background-color: var(--melange_c_blue);
}
article span.fixme {
  background-color: var(--melange_c_red);
}
article span.note {
  background-color: var(--melange_c_cyan);
}
article mark {
  background-color: var(--color-background);
  font-weight: bold;
  color: var(--melange_b_yellow);
}
article .yt-wrapper {
  width: 100%;
  grid-column: 2/5 !important;
  max-inline-size: none;
  --measure: 100%;
  margin-top: var(--space-2xs);
  display: flex;
  justify-content: center;
  position: relative;
}
article .yt-container a {
  color: var(--melange_a_com);
  color: var(--melange_a_fg);
  text-decoration: none;
}
article .yt-container a:hover {
  text-decoration: underline;
  color: var(--color-link-hover);
}
article .yt-container .yt-overlay {
  position: absolute;
  display: inline-block;
  width: 100%;
  left: 0;
  top: calc(50% + 24px + 1ch);
  display: flex;
  justify-content: center;
  text-rendering: optimizeLegibility;
  font-family: concourse_4, Helvetica, sans-serif;
  font-feature-settings: "ss06" on, "onum" off, "kern" on;
}
article .yt-container .yt-overlay span {
  display: inline-block;
  padding-inline: var(--space-3xs);
  color: #ece1d7;
  background-color: rgba(41, 37, 34, 0.8);
}
article .yt-container .play-button {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 64px;
  height: 48px;
  margin-left: -34px;
  margin-top: -24px;
}
article .yt-container .play-button path.background {
  fill: #403a36;
}
article .yt-container .play-button path.arrow {
  fill: #ece1d7;
}
article .yt-container:hover .play-button path.background {
  fill: #bf0021;
}
article .yt-container:hover .yt-overlay span {
  text-decoration: underline;
}
article a[role=doc-noteref]:link,
article a[role=doc-backlink]:link {
  text-decoration: none;
}
article a[role=doc-noteref]:hover,
article a[role=doc-backlink]:hover {
  text-decoration: underline;
}
article a[role=doc-backlink] {
  padding-left: var(--space-3xs);
}
article section[role=doc-endnotes] > hr {
  overflow: visible;
  text-align: center;
  margin: 0;
}
article section[role=doc-endnotes] > hr:after {
  text-rendering: optimizeLegibility;
  font-family: concourse_4, Helvetica, sans-serif;
  font-feature-settings: "ss06" on, "onum" off, "kern" on;
  font-size: var(--font-size-s);
  line-height: calc(2px + 2ex + 2px);
  color: var(--color-footnote-def);
  position: relative;
  top: 1.4ch;
  padding: 0 var(--space-3xs);
  background-color: var(--color-background);
  content: "Notes";
}
article section[role=doc-endnotes] :is(ol, ul) > li::before {
  color: var(--color-footnote-def);
}
article section.changelog > hr {
  overflow: visible;
  text-align: center;
  margin: 0;
}
article section.changelog > hr:after {
  text-rendering: optimizeLegibility;
  font-family: concourse_4, Helvetica, sans-serif;
  font-feature-settings: "ss06" on, "onum" off, "kern" on;
  font-size: var(--font-size-s);
  line-height: calc(2px + 2ex + 2px);
  color: var(--color-footnote-def);
  position: relative;
  top: 1.4ch;
  padding: 0 var(--space-3xs);
  background-color: var(--color-background);
  content: "Changelog";
}
article section.changelog :is(ol, ul) > li::before {
  color: var(--color-footnote-def);
}
article section.changelog .item time {
  text-rendering: optimizeLegibility;
  font-family: concourse_4, Helvetica, sans-serif;
  font-feature-settings: "ss06" on, "onum" off, "kern" on;
}
article section.changelog .item .description {
  display: grid;
  row-gap: var(--flow-space);
}

.timeline .events {
  display: flex;
  flex-direction: column;
  row-gap: var(--space-xs);
  position: relative;
  margin: var(--space-2xs);
}
.timeline .events::before {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  width: 1px;
  background: var(--color-hr);
}
.timeline .events .event {
  display: flex;
  align-items: baseline;
}
.timeline .events .event .marker {
  fill: var(--color-hr);
  order: 0;
  position: relative;
  left: -6px;
  flex-shrink: 0;
}
.timeline .events .content .text {
  display: flex;
  flex-direction: column;
  row-gap: var(--flow-space);
}
.timeline .events .content time {
  text-rendering: optimizeLegibility;
  font-family: concourse_4, Helvetica, sans-serif;
  font-feature-settings: "ss06" on, "onum" off, "kern" on;
  font-weight: bold;
}
.timeline .events .event:is(.family) .marker {
  fill: var(--melange_b_red);
}
.timeline .events .event:is(.life) .marker {
  fill: var(--melange_b_yellow);
}
.timeline .events .event:is(.hobbies) .marker {
  fill: var(--melange_c_yellow);
}
.timeline .events .event:is(.projects) .marker {
  fill: var(--melange_b_blue);
}
.timeline .events .event:is(.work) .marker {
  fill: var(--melange_b_green);
}
.timeline .events .event:is(.programming) .marker {
  fill: var(--melange_b_magenta);
}
.timeline .events .event:is(.smartwatch) .marker {
  fill: var(--melange_b_blue);
}
.timeline .events .event:is(.smartband) .marker {
  fill: var(--melange_b_cyan);
}
.timeline .events .event:is(.oura) .marker {
  fill: var(--melange_b_yellow);
}
.timeline .events .event:is(.whoop) .marker {
  fill: var(--melange_c_yellow);
}
.timeline .events .event:is(.eightsleep) .marker {
  fill: var(--melange_b_magenta);
}
.timeline .events .event:is(.hrtracker) .marker {
  fill: var(--melange_b_red);
}
.timeline .events .event:is(.withings) .marker {
  fill: var(--melange_b_green);
}

.timeline.blog-tech-stack .event.kohana .marker {
  fill: var(--melange_c_green);
}
.timeline.blog-tech-stack .event.mojolicious .marker {
  fill: var(--melange_c_blue);
}
.timeline.blog-tech-stack .event.jekyll .marker {
  fill: var(--melange_c_yellow);
}
.timeline.blog-tech-stack .event:is(.hakyll, .hakyll-space) .marker {
  fill: var(--melange_c_magenta);
}
.timeline.blog-tech-stack .event.rust .marker {
  fill: var(--melange_b_red);
}
.timeline.blog-tech-stack .event.git .marker {
  fill: var(--melange_b_green);
}
.timeline.blog-tech-stack .event.css .marker {
  fill: var(--melange_b_blue);
}
.timeline.blog-tech-stack .event.djot .marker {
  fill: var(--melange_b_cyan);
}
.timeline.blog-tech-stack .event.neovim .marker {
  fill: var(--melange_b_yellow);
}

@media (min-width: 700px) {
  .timeline {
    width: 100%;
    grid-column: 2/5 !important;
    max-inline-size: none;
  }
  .timeline .events::before {
    left: 50%;
  }
  .timeline .events .event .marker {
    order: 1;
  }
  .timeline .events .event .content {
    width: 50%;
    text-align: right;
    padding-inline: var(--space-xs);
  }
  .timeline .events .event:is(.programming,
.work,
.projects,
.fitnessdevice,
.oura,
.whoop,
.eightsleep,
.hrtracker),
.timeline.blog-tech-stack .events .event:nth-child(even) {
    flex-direction: row-reverse;
  }
  .timeline .events .event:is(.programming,
.work,
.projects,
.fitnessdevice,
.oura,
.whoop,
.eightsleep,
.hrtracker) .marker,
.timeline.blog-tech-stack .events .event:nth-child(even) .marker {
    left: 6px;
  }
  .timeline .events .event:is(.programming,
.work,
.projects,
.fitnessdevice,
.oura,
.whoop,
.eightsleep,
.hrtracker) .content,
.timeline.blog-tech-stack .events .event:nth-child(even) .content {
    text-align: left;
  }
}
.post-items {
  --flow-space: var(--space-s);
}
.post-items .post-item h2 {
  font-size: var(--font-size-l);
  line-height: calc(2px + 2ex + 2px);
}
.post-items .post-item .favorite {
  vertical-align: text-top;
}
.post-items .post-item .favorite,
.post-items .post-item .favorite a {
  color: var(--color-highlight-favorite);
}
.post-items .post-item .favorite a:hover {
  color: var(--color-link-hover);
}

article.post .post-series-footer,
article.post .post-series-head {
  background-color: var(--melange_a_float);
  padding: var(--space-xs);
  border: 1px dashed var(--melange_c_red);
}
article.post .post-series-footer > * + *,
article.post .post-series-head > * + * {
  margin-block-start: var(--flow-space);
  --flow-space: var(--space-3xs);
}
article.post .post-series-footer .posts {
  margin-block: var(--space-s);
}
article.post .post-series-footer .posts .current a {
  color: var(--melange_c_red);
}
article.post .post-series-footer .posts .current a:hover {
  color: var(--color-link-hover);
}
article.post .post-series-footer .posts ol > li::before {
  color: var(--melange_a_com);
}
article.post .post-series-footer .posts .current-marker {
  color: var(--melange_a_com);
  margin-left: var(--space-3xs);
}
article.post .post-footer {
  margin-top: var(--space-m);
  border-top: 1px solid var(--color-hr);
}
article.post .post-footer .post-info {
  margin-block-start: var(--space-2xs);
  justify-content: center;
}
article.post .post-footer .post-nav {
  text-rendering: optimizeLegibility;
  font-family: concourse_4, Helvetica, sans-serif;
  font-feature-settings: "ss06" on, "onum" off, "kern" on;
  font-size: var(--font-size-s);
  line-height: calc(2px + 2ex + 2px);
  display: flex;
  justify-content: space-between;
  margin-block-start: var(--space-2xs);
}
article.post header {
  width: 100%;
  grid-column: 3/5 !important;
  max-inline-size: none;
}
article.post header > h2.series {
  margin-block-end: var(--space-xs);
}
article.post header > h2.series > a {
  border-bottom: 4px solid var(--color-highlight-series);
  text-decoration: none;
}
article.post header > h2.series > a:hover {
  border-bottom: 4px solid var(--color-link-hover);
  text-decoration: none;
}
article.post header > h2.series > a {
  font-size: var(--font-size-l);
  line-height: calc(2px + 2ex + 2px);
}
article.post header > h1 a:hover {
  text-decoration: none;
}
article.post .ok {
  font-style: italic;
  color: var(--melange_b_green);
}
article.post .partly {
  font-style: italic;
  color: var(--melange_b_yellow);
}
article.post .failed {
  font-style: italic;
  color: var(--melange_b_red);
}

article.series header h1 > a {
  border-bottom: 4px solid var(--color-highlight-series);
  text-decoration: none;
}
article.series header h1 > a:hover {
  border-bottom: 4px solid var(--color-link-hover);
  text-decoration: none;
}
article.series .read-part-1 {
  margin-block-end: var(--space-xs);
}
article.series .series-footer {
  margin-block-start: calc(var(--space-xs) + var(--space-xs));
}

.series-archive .descr {
  margin-block-end: var(--space-xs);
}

.series-list > * + * {
  margin-block-start: var(--flow-space);
  --flow-space: var(--space-xs);
}
.series-list .series-item > * + * {
  margin-block-start: var(--flow-space);
  --flow-space: var(--space-xs);
}
.series-list .series-item h2 {
  margin-block-end: var(--space-xs);
}
.series-list .series-item h2 > a {
  border-bottom: 3px solid var(--color-highlight-series);
  text-decoration: none;
}
.series-list .series-item h2 > a:hover {
  border-bottom: 3px solid var(--color-link-hover);
  text-decoration: none;
}

.series-list .series-item .description > * + *,
.series-description > * + * {
  margin-block-start: var(--flow-space);
}

.series-info .completed {
  color: var(--color-series-completed);
  font-style: italic;
}

.series-info .ongoing {
  color: var(--color-series-ongoing);
  font-style: italic;
}

article.archive h1 > * {
  border-bottom: 4px solid var(--color-highlight-archive);
}
article.archive .title-wrapper h1 > * {
  border-bottom: 4px solid var(--color-highlight-tags);
}
article.archive .title-wrapper > .pre-title {
  text-rendering: optimizeLegibility;
  font-family: concourse_4, Helvetica, sans-serif;
  font-feature-settings: "ss06" on, "onum" off, "kern" on;
  font-size: var(--font-size-s);
  line-height: calc(2px + 2ex + 2px);
  color: var(--color-highlight-archive);
}
article.archive .title-wrapper .post-count {
  color: var(--melange_a_ui);
}
article.archive .title-wrapper h1 {
  margin-block-start: 0;
}
article.archive h1 {
  margin-block-end: var(--space-xs);
  line-height: 1.3;
}
article.archive .favorite-descr {
  margin-block-end: var(--space-xs);
}
article.archive .favorite-descr .favorite {
  display: inline-block;
  position: relative;
  top: -2px;
  vertical-align: baseline;
  color: var(--color-highlight-favorite);
}

article.projects .project {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: subgrid;
}

article.project {
  margin-block-start: var(--space-xs);
}
article.project h2 > a {
  border-bottom: 4px solid var(--color-highlight-projects);
  text-decoration: none;
}
article.project h2 > a:hover {
  border-bottom: 4px solid var(--color-link-hover);
  text-decoration: none;
}

.games {
  margin-block-start: var(--space-xs);
  width: 100%;
  grid-column: 1/-1 !important;
  max-inline-size: none;
  display: grid;
  grid-template-columns: subgrid;
}
.games header > * + * {
  margin-block-start: var(--flow-space);
  --flow-space: var(--space-xs);
}
.games h2 > * {
  border-bottom: 4px solid var(--color-highlight-projects);
}
.games .wrapper {
  width: 100%;
  grid-column: 2/5 !important;
  max-inline-size: none;
  display: flex;
  flex-wrap: wrap;
}
.games header {
  grid-column: 3;
}

.game {
  display: flex;
  justify-content: left;
  flex-wrap: nowrap;
  gap: var(--space-2xs);
  min-width: 20em;
  max-width: 50%;
  width: 50%;
  padding-bottom: var(--space-3xs);
  padding-right: var(--space-3xs);
}
.game .img {
  min-width: 160px;
}
.game .descr {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}
.game time,
.game .subtitle {
  font-size: var(--font-size-s);
  line-height: calc(2px + 2ex + 2px);
}
.game .subtitle a {
  color: var(--melange_b_magenta);
}
.game .subtitle a:hover {
  color: var(--color-link-hover);
}

article.tags-list h1 {
  margin-block-end: var(--space-xs);
}
article.tags-list .tags {
  width: 100%;
  grid-column: 2/5 !important;
  max-inline-size: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11em, 1fr));
  grid-column-gap: var(--space-2xs);
}
article.tags-list .tags a {
  color: var(--color-tags);
  text-decoration: none;
}
article.tags-list .tags a:hover {
  color: var(--color-tags-hover);
}

.homepage > article:not(:first-child) {
  margin-top: var(--space-l);
}
.homepage > article.homepage-posts > .section-title {
  border-left: 4px solid var(--color-highlight-archive);
}
.homepage > article.series > .section-title {
  border-left: 4px solid var(--color-highlight-series);
}
.homepage > article.projects > .section-title {
  border-left: 4px solid var(--color-highlight-projects);
}
.homepage > article > .section-title {
  padding-left: var(--space-2xs);
}
.homepage .homepage-posts > hr {
  overflow: visible;
  padding: 0;
  margin: 0;
  margin-top: var(--space-xs);
  margin-bottom: -1rem;
  border: none;
  border-top: 2px solid var(--color-hr);
  text-align: center;
  width: 20%;
}
.homepage .homepage-posts > hr.recent:after, .homepage .homepage-posts > hr.featured:after {
  text-rendering: optimizeLegibility;
  font-family: concourse_4, Helvetica, sans-serif;
  font-feature-settings: "ss06" on, "onum" off, "kern" on;
  font-size: var(--font-size-s);
  line-height: calc(2px + 2ex + 2px);
  color: var(--color-hr);
  position: relative;
  top: -2ch;
  padding: 0 var(--space-3xs);
  background-color: var(--color-background);
}
.homepage .homepage-posts > hr.recent:after {
  content: "Recent";
}
.homepage .homepage-posts > hr.featured:after {
  content: "Featured";
}

.timeline-1 .events::before {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  width: 1px;
  background: var(--color-hr);
}
.timeline-1 .events {
  position: relative;
  margin: 0.5em;
}
.timeline-1 .events::before {
  background: var(--color-hr);
}
.timeline-1 .event.life .marker {
  fill: var(--melange_b_yellow);
}
.timeline-1 .event.programming .marker {
  fill: var(--melange_b_magenta);
}
.timeline-1 .event.family .marker {
  fill: var(--melange_b_red);
}
.timeline-1 .content time {
  font-family: concourse_4, Helvetica, sans-serif;
  font-weight: bold;
}

.timeline-2 .event {
  display: flex;
}

.timeline-3 .event .marker {
  position: relative;
  left: -6px;
  top: 6px;
}

.timeline-4 .event .marker {
  position: relative;
  left: -6px;
  top: 0px;
}
.timeline-4 .event {
  align-items: baseline;
}

.timeline-5 .events {
  display: flex;
  flex-direction: column;
  row-gap: 1em;
}

@media (min-width: 700px) {
  .timeline-6 .events::before {
    left: 50%;
  }
  .timeline-7 .event .marker {
    order: 1;
  }
  .timeline-8 .event .content {
    width: 50%;
  }
  .timeline-9 .event .content {
    text-align: right;
    padding-inline: 1em;
  }
  .timeline-10 .event:is(.programming, .work, .projects) {
    flex-direction: row-reverse;
  }
  .timeline-10 .event:is(.programming, .work, .projects) .marker {
    left: 6px;
  }
  .timeline-10 .event:is(.programming, .work, .projects) .content {
    text-align: left;
  }
}
.timeline-done .events::before {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  width: 1px;
  background: var(--color-hr);
}
.timeline-done .events {
  position: relative;
  display: flex;
  margin: 0.5em;
  flex-direction: column;
  row-gap: 1em;
}
.timeline-done .event {
  display: flex;
  align-items: baseline;
}
.timeline-done .event .marker {
  position: relative;
  left: -6px;
}
.timeline-done .event.life .marker {
  fill: var(--melange_b_yellow);
}
.timeline-done .event.programming .marker {
  fill: var(--melange_b_magenta);
}
.timeline-done .event.family .marker {
  fill: var(--melange_b_red);
}
.timeline-done .content time {
  font-family: concourse_4, Helvetica, sans-serif;
  font-weight: bold;
}

@media (min-width: 700px) {
  .timeline-done .events::before {
    left: 50%;
  }
  .timeline-done .event .marker {
    order: 1;
  }
  .timeline-done .event .content {
    width: 50%;
    text-align: right;
    padding-inline: 1em;
  }
  .timeline-done .event:is(.programming, .work, .projects) {
    flex-direction: row-reverse;
  }
  .timeline-done .event:is(.programming, .work, .projects) .content {
    text-align: left;
  }
  .timeline-done .event:is(.programming, .work, .projects) .marker {
    left: 6px;
  }
}
.timeline-x .events .event .marker {
  fill: var(--color-hr);
  order: 0;
  position: relative;
  left: -6px;
  flex-shrink: 0;
}
.timeline-x .events .content time {
  text-rendering: optimizeLegibility;
  font-family: concourse_4, Helvetica, sans-serif;
  font-feature-settings: "ss06" on, "onum" off, "kern" on;
  font-weight: bold;
}
.timeline-x .events .event:is(.family) .marker {
  fill: var(--melange_b_red);
}
.timeline-x .events .event:is(.life) .marker {
  fill: var(--melange_b_yellow);
}
.timeline-x .events .event:is(.hobbies) .marker {
  fill: var(--melange_c_yellow);
}
.timeline-x .events .event:is(.projects) .marker {
  fill: var(--melange_b_blue);
}
.timeline-x .events .event:is(.work) .marker {
  fill: var(--melange_b_green);
}
.timeline-x .events .event:is(.programming) .marker {
  fill: var(--melange_b_magenta);
}

@media (min-width: 700px) {
  .timeline {
    width: 100%;
    grid-column: 2/5 !important;
    max-inline-size: none;
  }
  .timeline .events::before {
    left: 50%;
  }
  .timeline .events .event .marker {
    order: 1;
  }
  .timeline .events .event .content {
    width: 50%;
    text-align: right;
    padding-inline: var(--space-xs);
  }
  .timeline .events .event:is(.programming, .work, .projects) {
    flex-direction: row-reverse;
  }
  .timeline .events .event:is(.programming, .work, .projects) .marker {
    left: 6px;
  }
  .timeline .events .event:is(.programming, .work, .projects) .content {
    text-align: left;
  }
}
.charts-wrapper > svg {
  width: 100%;
  grid-column: 2/5 !important;
  max-inline-size: none;
  flex: 1;
  width: 100%;
}

.blog-stats-graph {
  width: 100%;
  grid-column: 2/5 !important;
  max-inline-size: none;
  /* background-color: var(--melange_a_float); */
}
.blog-stats-graph .labels.x-labels {
  text-anchor: middle;
}
.blog-stats-graph .labels.y-labels {
  text-anchor: end;
}
.blog-stats-graph .y-labels .label-title {
  text-anchor: end;
}
.blog-stats-graph .grid {
  stroke: var(--melange_a_ui);
  stroke-dasharray: 0;
  stroke-width: 1;
}
.blog-stats-graph .labels {
  font-size: var(--font-size-s);
  line-height: calc(2px + 2ex + 2px);
  text-rendering: optimizeLegibility;
  font-family: concourse_4, Helvetica, sans-serif;
  font-feature-settings: "ss06" on, "onum" off, "kern" on;
  fill: var(--color-text);
}
.blog-stats-graph .label-title {
  font-weight: bold;
  fill: var(--color-text);
}
.blog-stats-graph .data-set-label {
  font-size: var(--font-size-xs);
  line-height: calc(2px + 2ex + 2px);
}
.blog-stats-graph .data-set.crypto, .blog-stats-graph .data-set.crypto:hover {
  fill: var(--melange_b_yellow);
}
.blog-stats-graph .data-set.programming, .blog-stats-graph .data-set.programming:hover {
  fill: var(--melange_b_red);
}
.blog-stats-graph .data-set.printing, .blog-stats-graph .data-set.printing:hover {
  fill: var(--melange_c_magenta);
}
.blog-stats-graph .data-set.life, .blog-stats-graph .data-set.life:hover {
  fill: var(--melange_c_yellow);
}
.blog-stats-graph .data-set.linux, .blog-stats-graph .data-set.linux:hover {
  fill: var(--melange_b_magenta);
}
.blog-stats-graph .data-set.games, .blog-stats-graph .data-set.games:hover {
  fill: var(--melange_c_blue);
  z-index: 1000;
}
.blog-stats-graph .data-set.keyboards, .blog-stats-graph .data-set.keyboards:hover {
  fill: var(--melange_b_cyan);
}
.blog-stats-graph .data-set.game_design_course, .blog-stats-graph .data-set.game_design_course:hover {
  fill: var(--melange_c_cyan);
}
.blog-stats-graph .data-set.gaming, .blog-stats-graph .data-set.gaming:hover {
  fill: var(--melange_b_green);
}
.blog-stats-graph .data-set.yearly_review, .blog-stats-graph .data-set.yearly_review:hover {
  fill: var(--melange_a_fg);
  cursor: pointer;
}
.blog-stats-graph .data-set.fallback, .blog-stats-graph .data-set.fallback:hover {
  fill: var(--melange_a_ui);
}
.blog-stats-graph .data-set:hover circle {
  r: 5px;
}
.blog-stats-graph .data-set:hover .data-set-label {
  /* font-size: 1.1rem; */
  font-weight: bold;
}
.blog-stats-graph .data-1 {
  fill: var(--melange_b_green);
  stroke-width: 1;
}
.blog-stats-graph .data-2 {
  fill: var(--melange_b_magenta);
  stroke-width: 1;
}
.blog-stats-graph .data-1:hover {
  fill: red;
}
.blog-stats-graph .data-2:has(foreignObject input:checked) {
  fill: blue;
}

.keymap.leftie {
  max-width: 410px;
}

.keycap.blank .outer.border, .keycap.combo_background .outer.border,
.legend.blank .outer.border,
.legend.combo_background .outer.border {
  fill: oklch(95% 0.0117 59.57);
}
.keycap.blank .inner.border, .keycap.combo_background .inner.border,
.legend.blank .inner.border,
.legend.combo_background .inner.border {
  fill: oklch(98% 0.0117 59.57);
}
.keycap.blank.blank text, .keycap.combo_background.blank text,
.legend.blank.blank text,
.legend.combo_background.blank text {
  fill: var(--melange_a_fg);
}
.keycap.blank.combo_background text, .keycap.combo_background.combo_background text,
.legend.blank.combo_background text,
.legend.combo_background.combo_background text {
  fill: var(--melange_a_com);
}
.keycap.default .outer.border,
.legend.default .outer.border {
  fill: oklch(92% 0.051 80.53);
}
.keycap.default .inner.border,
.legend.default .inner.border {
  fill: oklch(95% 0.051 80.53);
}
.keycap.management .outer.border,
.legend.management .outer.border {
  fill: oklch(77% 0.0402 65.7);
}
.keycap.management .inner.border,
.legend.management .inner.border {
  fill: oklch(80% 0.0402 65.7);
}
.keycap.layer1 .outer.border,
.legend.layer1 .outer.border {
  fill: oklch(77% 0.0829 260.6);
}
.keycap.layer1 .inner.border,
.legend.layer1 .inner.border {
  fill: oklch(80% 0.0829 260.6);
}
.keycap.layer_down .outer.border,
.legend.layer_down .outer.border {
  fill: oklch(77% 0.0829 302.47);
}
.keycap.layer_down .inner.border,
.legend.layer_down .inner.border {
  fill: oklch(80% 0.0829 302.47);
}
.keycap.layer_toggle .outer.border,
.legend.layer_toggle .outer.border {
  fill: oklch(77% 0.0829 342.47);
}
.keycap.layer_toggle .inner.border,
.legend.layer_toggle .inner.border {
  fill: oklch(80% 0.0829 342.47);
}
.keycap.mod1 .outer.border,
.legend.mod1 .outer.border {
  fill: oklch(77% 0.0901 146.92);
}
.keycap.mod1 .inner.border,
.legend.mod1 .inner.border {
  fill: oklch(80% 0.0901 146.92);
}
.keycap.mod_down .outer.border,
.legend.mod_down .outer.border {
  fill: oklch(77% 0.0901 126.44);
}
.keycap.mod_down .inner.border,
.legend.mod_down .inner.border {
  fill: oklch(80% 0.0901 126.44);
}
.keycap.mod_implicit .outer.border,
.legend.mod_implicit .outer.border {
  fill: oklch(77% 0.0901 96.44);
}
.keycap.mod_implicit .inner.border,
.legend.mod_implicit .inner.border {
  fill: oklch(80% 0.0901 96.44);
}
.keycap.active_layer .outer.border,
.legend.active_layer .outer.border {
  fill: oklch(77% 0.1385 31.76);
}
.keycap.active_layer .inner.border,
.legend.active_layer .inner.border {
  fill: oklch(80% 0.1385 31.76);
}
.keycap.dead_key .outer.border,
.legend.dead_key .outer.border {
  fill: oklch(77% 0.1211 66.81);
}
.keycap.dead_key .inner.border,
.legend.dead_key .inner.border {
  fill: oklch(80% 0.1211 66.81);
}
.keycap.special .outer.border,
.legend.special .outer.border {
  fill: oklch(82% 0.13 95.57);
}
.keycap.special .inner.border,
.legend.special .inner.border {
  fill: oklch(85% 0.13 95.57);
}
.keycap.effort_0 .outer.border,
.legend.effort_0 .outer.border {
  fill: oklch(92% 0.1422 140.82);
}
.keycap.effort_0 .inner.border,
.legend.effort_0 .inner.border {
  fill: oklch(95% 0.1422 140.82);
}
.keycap.effort_1 .outer.border,
.legend.effort_1 .outer.border {
  fill: oklch(90% 0.1422 127.47);
}
.keycap.effort_1 .inner.border,
.legend.effort_1 .inner.border {
  fill: oklch(93% 0.1422 127.47);
}
.keycap.effort_2 .outer.border,
.legend.effort_2 .outer.border {
  fill: oklch(88% 0.1422 114.47);
}
.keycap.effort_2 .inner.border,
.legend.effort_2 .inner.border {
  fill: oklch(91% 0.1422 114.47);
}
.keycap.effort_3 .outer.border,
.legend.effort_3 .outer.border {
  fill: oklch(86% 0.1422 101.47);
}
.keycap.effort_3 .inner.border,
.legend.effort_3 .inner.border {
  fill: oklch(89% 0.1422 101.47);
}
.keycap.effort_4 .outer.border,
.legend.effort_4 .outer.border {
  fill: oklch(84% 0.1422 88.47);
}
.keycap.effort_4 .inner.border,
.legend.effort_4 .inner.border {
  fill: oklch(87% 0.1422 88.47);
}
.keycap.effort_4 .outer.border,
.legend.effort_4 .outer.border {
  fill: oklch(82% 0.1422 75.47);
}
.keycap.effort_4 .inner.border,
.legend.effort_4 .inner.border {
  fill: oklch(85% 0.1422 75.47);
}
.keycap.effort_5 .outer.border,
.legend.effort_5 .outer.border {
  fill: oklch(80% 0.1422 62.47);
}
.keycap.effort_5 .inner.border,
.legend.effort_5 .inner.border {
  fill: oklch(83% 0.1422 62.47);
}
.keycap.effort_6 .outer.border,
.legend.effort_6 .outer.border {
  fill: oklch(78% 0.1422 49.47);
}
.keycap.effort_6 .inner.border,
.legend.effort_6 .inner.border {
  fill: oklch(81% 0.1422 49.47);
}
.keycap.effort_7 .outer.border,
.legend.effort_7 .outer.border {
  fill: oklch(76% 0.1422 36.47);
}
.keycap.effort_7 .inner.border,
.legend.effort_7 .inner.border {
  fill: oklch(79% 0.1422 36.47);
}
.keycap.effort_8 .outer.border,
.legend.effort_8 .outer.border {
  fill: oklch(74% 0.1422 19.76);
}
.keycap.effort_8 .inner.border,
.legend.effort_8 .inner.border {
  fill: oklch(77% 0.1422 19.76);
}

@media (prefers-color-scheme: dark) {
  .keycap.blank .outer.border, .keycap.combo_background .outer.border,
.legend.blank .outer.border,
.legend.combo_background .outer.border {
    fill: oklch(35% 0.0108 56.01);
  }
  .keycap.blank .inner.border, .keycap.combo_background .inner.border,
.legend.blank .inner.border,
.legend.combo_background .inner.border {
    fill: oklch(37% 0.0108 56.01);
  }
  .keycap.blank text,
.legend.blank text {
    fill: var(--melange_a_com);
  }
  .keycap.combo_background text,
.legend.combo_background text {
    fill: var(--melange_a_ui);
  }
  .keycap.default .outer.border,
.legend.default .outer.border {
    fill: oklch(73% 0.054 65.16);
    /* fill: oklch(from var(--fill) calc(l - 0.05) c h); */
  }
  .keycap.default .inner.border,
.legend.default .inner.border {
    fill: oklch(76% 0.054 65.16);
  }
  .keycap.management .outer.border,
.legend.management .outer.border {
    fill: oklch(59% 0.0402 65.7);
  }
  .keycap.management .inner.border,
.legend.management .inner.border {
    fill: oklch(62% 0.0402 65.7);
  }
  .keycap.layer1 .outer.border,
.legend.layer1 .outer.border {
    fill: oklch(73% 0.054 262.47);
  }
  .keycap.layer1 .inner.border,
.legend.layer1 .inner.border {
    fill: oklch(76% 0.054 262.47);
  }
  .keycap.layer_down .outer.border,
.legend.layer_down .outer.border {
    fill: oklch(67% 0.054 302.47);
  }
  .keycap.layer_down .inner.border,
.legend.layer_down .inner.border {
    fill: oklch(70% 0.054 302.47);
  }
  .keycap.layer_toggle .outer.border,
.legend.layer_toggle .outer.border {
    fill: oklch(59% 0.054 342.47);
  }
  .keycap.layer_toggle .inner.border,
.legend.layer_toggle .inner.border {
    fill: oklch(62% 0.054 342.47);
  }
  .keycap.mod1 .outer.border,
.legend.mod1 .outer.border {
    fill: oklch(73% 0.0586 166.44);
  }
  .keycap.mod1 .inner.border,
.legend.mod1 .inner.border {
    fill: oklch(76% 0.0586 166.44);
  }
  .keycap.mod_down .outer.border,
.legend.mod_down .outer.border {
    fill: oklch(67% 0.0586 126.44);
  }
  .keycap.mod_down .inner.border,
.legend.mod_down .inner.border {
    fill: oklch(70% 0.0586 126.44);
  }
  .keycap.mod_implicit .outer.border,
.legend.mod_implicit .outer.border {
    fill: oklch(59% 0.0586 96.44);
  }
  .keycap.mod_implicit .inner.border,
.legend.mod_implicit .inner.border {
    fill: oklch(62% 0.0586 96.44);
  }
  .keycap.active_layer .outer.border,
.legend.active_layer .outer.border {
    fill: oklch(59% 0.1198 31.4);
  }
  .keycap.active_layer .inner.border,
.legend.active_layer .inner.border {
    fill: oklch(62% 0.1198 31.4);
  }
  .keycap.dead_key .outer.border,
.legend.dead_key .outer.border {
    fill: oklch(73% 0.1175 59.9);
  }
  .keycap.dead_key .inner.border,
.legend.dead_key .inner.border {
    fill: oklch(76% 0.1175 59.9);
  }
  .keycap.special .outer.border,
.legend.special .outer.border {
    fill: oklch(73% 0.1129 82.54);
  }
  .keycap.special .inner.border,
.legend.special .inner.border {
    fill: oklch(76% 0.1129 82.54);
  }
  .keycap.effort_0 .outer.border,
.legend.effort_0 .outer.border {
    fill: oklch(68% 0.1422 140.82);
  }
  .keycap.effort_0 .inner.border,
.legend.effort_0 .inner.border {
    fill: oklch(71% 0.1422 140.82);
  }
  .keycap.effort_1 .outer.border,
.legend.effort_1 .outer.border {
    fill: oklch(66% 0.1422 127.47);
  }
  .keycap.effort_1 .inner.border,
.legend.effort_1 .inner.border {
    fill: oklch(69% 0.1422 127.47);
  }
  .keycap.effort_2 .outer.border,
.legend.effort_2 .outer.border {
    fill: oklch(64% 0.1422 114.47);
  }
  .keycap.effort_2 .inner.border,
.legend.effort_2 .inner.border {
    fill: oklch(67% 0.1422 114.47);
  }
  .keycap.effort_3 .outer.border,
.legend.effort_3 .outer.border {
    fill: oklch(62% 0.1422 101.47);
  }
  .keycap.effort_3 .inner.border,
.legend.effort_3 .inner.border {
    fill: oklch(65% 0.1422 101.47);
  }
  .keycap.effort_4 .outer.border,
.legend.effort_4 .outer.border {
    fill: oklch(60% 0.1422 88.47);
  }
  .keycap.effort_4 .inner.border,
.legend.effort_4 .inner.border {
    fill: oklch(63% 0.1422 88.47);
  }
  .keycap.effort_4 .outer.border,
.legend.effort_4 .outer.border {
    fill: oklch(58% 0.1422 75.47);
  }
  .keycap.effort_4 .inner.border,
.legend.effort_4 .inner.border {
    fill: oklch(61% 0.1422 75.47);
  }
  .keycap.effort_5 .outer.border,
.legend.effort_5 .outer.border {
    fill: oklch(56% 0.1422 62.47);
  }
  .keycap.effort_5 .inner.border,
.legend.effort_5 .inner.border {
    fill: oklch(59% 0.1422 62.47);
  }
  .keycap.effort_6 .outer.border,
.legend.effort_6 .outer.border {
    fill: oklch(54% 0.1422 49.47);
  }
  .keycap.effort_6 .inner.border,
.legend.effort_6 .inner.border {
    fill: oklch(57% 0.1422 49.47);
  }
  .keycap.effort_7 .outer.border,
.legend.effort_7 .outer.border {
    fill: oklch(52% 0.1422 36.47);
  }
  .keycap.effort_7 .inner.border,
.legend.effort_7 .inner.border {
    fill: oklch(55% 0.1422 36.47);
  }
  .keycap.effort_8 .outer.border,
.legend.effort_8 .outer.border {
    fill: oklch(50% 0.1422 19.76);
  }
  .keycap.effort_8 .inner.border,
.legend.effort_8 .inner.border {
    fill: oklch(53% 0.1422 19.76);
  }
}