@charset "UTF-8";
.u-text-centered {
  text-align: center;
}
.u-text-size-md, h3 {
  font-size: 112.5%;
  letter-spacing: initial;
  line-height: 2.25rem;
}
.u-text-size-lg, h2 {
  font-size: 150%;
  letter-spacing: initial;
  line-height: 2.25rem;
}
.u-text-size-xl, h1 {
  font-size: 225%;
  letter-spacing: -0.0625rem;
  line-height: 3rem;
}
@media only screen and (min-width: 30em) {
  .u-text-size-xl, h1 {
    font-size: 250%;
    line-height: 3.5rem;
  }
}

:root {
  --base-background: oklch(98.16% 0.0017 247.8deg);
  --base-foreground: #000000;
  --base-highlight: oklch(94.17% 0.0052 247.9deg);
  --base-link: oklch(54.57% 0.1949 26.61deg);
  --base-shadow: oklch(22.4% 0.0509 260.5deg);
  --button-background: oklch(54.57% 0.1949 26.61deg);
  --button-background-active: oklch(46.2% 0.1702 26.47deg);
  --button-background-hover: oklch(49.75% 0.1763 26.49deg);
  --button-foreground: oklch(98.16% 0.0017 247.8deg);
  --dialog-backdrop-background: oklch(from var(--base-shadow) l c h / 0.54);
  --drawing-outline-background: oklch(98.16% 0.0017 247.8deg);
  --label-border-colour: oklch(94.17% 0.0052 247.9deg);
  --label-border-colour-hover: oklch(87.54% 0.0088 248deg);
  --page-header-background: oklch(50.74% 0.156 7.49deg);
  --page-header-foreground: #ffffff;
  --page-gutter: 2rem;
  --site-header-background: var(--page-header-background);
  --site-header-foreground: var(--page-header-foreground);
  --table-border-colour: oklch(87.54% 0.0088 248deg);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    --base-background: oklch(26.21% 0.0095 248.2deg);
    --base-foreground: oklch(98.16% 0.0017 247.8deg);
    --base-highlight: oklch(34.51% 0.0133 248.2deg);
    --base-link: oklch(69.24% 0.1765 1.25deg);
    --base-shadow: oklch(from oklch(22.4% 0.0509 260.5deg) calc(l / 2) c h);
    --button-background: oklch(69.24% 0.1765 1.25deg);
    --button-background-active: oklch(80.8% 0.1104 357.2deg);
    --button-background-hover: oklch(74.96% 0.1475 358.8deg);
    --button-foreground: oklch(26.21% 0.0095 248.2deg);
    --label-border-colour: oklch(34.51% 0.0133 248.2deg);
    --label-border-colour-hover: oklch(40% 0.0105 248.1deg);
    --table-border-colour: oklch(34.51% 0.0133 248.2deg);
  }
}
:root[data-theme=dark] {
  --base-background: oklch(26.21% 0.0095 248.2deg);
  --base-foreground: oklch(98.16% 0.0017 247.8deg);
  --base-highlight: oklch(34.51% 0.0133 248.2deg);
  --base-link: oklch(69.24% 0.1765 1.25deg);
  --base-shadow: oklch(from oklch(22.4% 0.0509 260.5deg) calc(l / 2) c h);
  --button-background: oklch(69.24% 0.1765 1.25deg);
  --button-background-active: oklch(80.8% 0.1104 357.2deg);
  --button-background-hover: oklch(74.96% 0.1475 358.8deg);
  --button-foreground: oklch(26.21% 0.0095 248.2deg);
  --label-border-colour: oklch(34.51% 0.0133 248.2deg);
  --label-border-colour-hover: oklch(40% 0.0105 248.1deg);
  --table-border-colour: oklch(34.51% 0.0133 248.2deg);
}

a:active, a:hover, a:focus, a:focus-visible {
  text-decoration-color: currentColor;
  text-decoration-line: underline;
}

:focus-visible {
  outline: var(--outline-colour, currentColor) solid 0.1875rem;
}

:target {
  scroll-margin-block: 2rem;
}

a {
  color: var(--base-link);
}

aside {
  font-style: italic;
}

body {
  /* stylelint-disable-next-line property-no-unknown */
  font-smoothing: antialiased;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: none;
  background: var(--base-background);
  color: var(--base-foreground);
  display: flex;
  flex-direction: column;
  font-family: Seravek, "Gill Sans Nova", Ubuntu, "Segoe UI", "DejaVu Sans", source-sans-pro, sans-serif;
  font-size: 125%;
  height: 100%;
  line-height: 2rem;
  margin: 0;
}

code {
  background: var(--base-highlight);
  font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
  font-size: 80%;
  line-height: 1;
}

dl {
  margin: 0;
  padding: 0;
}
dl dd {
  margin: 0 0 0 1rem;
  padding: 0;
}

details {
  margin: 0;
}
details div {
  margin: 0 0 0 2rem;
  opacity: 0;
  transition: opacity 0.125s ease-in-out, transform 0.125s ease-in-out;
  padding: 1rem 0;
  transform: translateX(-1rem);
}
details div > *:first-child {
  margin: 0;
}
details summary {
  cursor: pointer;
  list-style: none;
  padding: 0 0 0 2rem;
  position: relative;
}
details summary::before {
  background: radial-gradient(circle, var(--base-foreground) 0, var(--base-foreground) 60%, var(--base-background) 60%);
  content: "";
  display: block;
  height: 2rem;
  mask: url("/assets/icon-chevron.20260920194416.svg") no-repeat center;
  mask-size: 40%;
  position: absolute;
  top: 0;
  left: 0;
  transform: rotate(-90deg);
  transition: 0.125s transform ease;
  width: 2rem;
}
details summary::marker, details summary::-webkit-details-marker {
  display: none;
}
details[open] div {
  opacity: 1;
  transform: none;
  transition-delay: 0.25s;
}
details[open] summary::before {
  transform: none;
}
details[data-animation-state=closing] div {
  opacity: 0;
  transform: translateX(-1rem);
  transition-delay: 0s;
}

fieldset {
  border: none;
  margin: 0;
  padding: 0;
}
fieldset legend {
  font-weight: bold;
  margin: 0;
  padding: 0;
}

figure {
  margin: 0;
}
@media only screen and (max-width: 30em) and (not (width: 30em)) {
  figure {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    overflow-y: hidden;
    position: relative;
  }
}
figure > *:last-child {
  position: relative;
}
@media only screen and (max-width: 30em) and (not (width: 30em)) {
  figure > *:last-child::after {
    content: "";
    display: block;
    height: 0.0625rem;
    position: absolute;
    right: -2rem;
    width: 2rem;
  }
}

h1 {
  margin: 0;
  text-wrap: balance;
}

h2 {
  margin: 0;
  text-wrap: balance;
}

h3 {
  line-height: 1.35;
  margin: 0;
  text-wrap: balance;
}

html {
  scrollbar-gutter: stable;
  font-size: 90%;
}
@media only screen and (min-width: 30em) {
  html {
    font-size: 100%;
  }
}
@media (prefers-reduced-motion: no-preference) {
  html:focus-within {
    scroll-behavior: smooth;
  }
}

hr[aria-hidden=true] {
  display: none;
}

img {
  font-style: italic;
  height: auto;
  margin: 0;
  max-width: 100%;
  vertical-align: middle;
}

kbd {
  background: var(--base-highlight);
  border-radius: 0.5rem;
  font-size: 87.5%;
  font-family: system-ui, sans-serif;
  line-height: 1;
  padding: 0.5rem;
}

label:has(input[type=radio]) {
  align-items: center;
  border: 0.1875rem solid var(--label-border-colour);
  border-radius: 0.25rem;
  box-sizing: border-box;
  display: flex;
  gap: 1rem;
  padding: 0.3125rem 0.8125rem;
}
label:has(input[type=radio]):hover {
  border-color: var(--label-border-colour-hover);
}
label:has(input[type=radio]):hover input[type=radio] {
  border-color: var(--button-background-hover);
}
label:has(input[type=radio]):has(input:checked) {
  background-color: var(--base-highlight);
}
label:has(input[type=radio]) input[type=radio] {
  appearance: none;
  border: 0.125rem solid var(--button-background);
  color: var(--base-link);
  border-radius: 50%;
  box-sizing: border-box;
  flex-shrink: 0;
  height: 1.5rem;
  margin: 0;
  outline-offset: 0.125rem;
  padding: 0;
  width: 1.5rem;
}
label:has(input[type=radio]) input[type=radio]:checked {
  border-width: 0.375rem;
}

main:has(.u-content:last-child) ~ .site-footer {
  --site-footer-padding-top: 0;
  --site-footer-border-display: none;
}

ol {
  margin: 0;
  padding: 0;
}
ol > * {
  margin-left: 2rem;
  padding: 0;
}
ol > * > ul, ol > * > ol {
  margin: 0;
}
ol[class] > * {
  list-style: none;
  margin-left: 0;
}

p {
  margin: 0;
  text-wrap: pretty;
}

pre {
  background: var(--base-highlight);
  box-sizing: border-box;
  margin: 0;
  max-width: 100%;
  overflow-x: auto;
  position: relative;
  padding: 1rem 2rem;
}
pre code {
  display: flex;
  line-height: 1.8rem;
  position: relative;
}
pre code::after {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 2rem;
}

table {
  margin: 0;
  border-collapse: collapse;
  width: 100%;
}
table > :not(caption) > * > * {
  padding-block: 0.46875rem;
  padding-inline: 0.5rem;
}
table > :not(caption) > * > *:first-child {
  padding-inline-start: 0;
}
table > :not(caption) > * > *:last-child {
  padding-inline-end: 0;
}
table > thead {
  vertical-align: bottom;
}
table > thead > * > * {
  padding-top: 0;
}
table tr {
  border-bottom: 0.0625rem solid var(--table-border-colour);
}
table tr td:has(+ td > .star-rating) {
  text-wrap: balance;
  width: 100%;
}
table tr:last-child {
  border-bottom-color: currentColor;
}

ul {
  margin: 0;
  padding: 0;
}
ul > * {
  margin-left: 2rem;
  padding: 0;
}
ul > * > ul, ul > * > ol {
  margin: 0;
}
ul[class] > * {
  list-style: none;
  margin-left: 0;
}

[aria-label][tabindex] {
  overflow: auto;
}

.button {
  --outline-colour: var(--button-background);
  appearance: none;
  background: var(--button-background);
  color: var(--button-foreground);
  border: none;
  border-radius: 0.5rem;
  display: inline-block;
  font: inherit;
  font-weight: bold;
  line-height: inherit;
  outline-offset: 0.125rem;
  padding: 1rem 2rem;
  position: relative;
  text-decoration-line: none;
}
.button:focus, .button:hover {
  background: var(--button-background-hover);
}
.button:active {
  background: var(--button-background-active);
}
.button--subtle:not(:active, :focus, :hover) {
  background: none;
  color: var(--button-background);
}
.button--small {
  padding: 0.5rem 1.5rem;
}

.call-to-action-link {
  background: transparent;
  border: 0.1875rem solid currentColor;
  border-radius: 0.5rem;
  display: inline-block;
  font-weight: bold;
  outline-offset: 0.125rem;
  padding: 0.8125rem 1.8125rem;
  text-decoration: none;
}
.call-to-action-link--smaller {
  border-radius: 0.25rem;
  padding: 0.0625rem 0.8125rem;
}

.cta-sharing {
  flex-direction: row;
  justify-content: center;
  margin: 6rem auto 0;
}
.cta-sharing__heading {
  font-weight: bold;
  margin: 0;
  text-align: center;
}

.dialog {
  animation: opening 0.35s both;
  animation-timing-function: cubic-bezier(0.8, 0, 0, 0.8);
  background: var(--base-background);
  border: none;
  border-radius: 0.5rem;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0);
  box-sizing: border-box;
  color: var(--base-foreground);
  max-height: calc(100vh - 4rem);
  max-width: min(100vw - 2rem, 31.25rem);
  padding: 2rem;
  text-align: left;
  width: 100%;
}
@keyframes opening {
  from {
    opacity: 0;
    transform: translateY(5%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .dialog {
    animation: none;
  }
}
.dialog[open] {
  box-shadow: 0 0 0 100vw var(--dialog-backdrop-background);
}
.dialog::backdrop {
  display: none;
}
.dialog__body {
  overflow: auto;
}
.dialog__footer.u-cluster {
  --cluster-justify-content: flex-end;
  flex-flow: row wrap;
  max-width: max-content;
  margin-inline-start: auto;
}
.dialog__footer.u-cluster > * {
  flex: 1 1 auto;
}
.dialog__header.u-cluster {
  --cluster-flex-direction: row-reverse;
  --cluster-justify-content: space-between;
}
.dialog__header.u-cluster .button {
  height: 2.25rem;
  padding: 0;
  width: 2.25rem;
}
.dialog__header.u-cluster .button::after {
  background: currentColor;
  content: "";
  display: inline-block;
  height: 100%;
  mask-image: url("icon-menu-close.20260920194416.svg");
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: 1.5rem;
  width: 100%;
}

.image-and-text {
  display: grid;
  grid-gap: 2rem;
  grid-template-rows: auto auto;
}
@media only screen and (min-width: 61.5em) {
  .image-and-text {
    grid-gap: 3rem;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: 1fr;
  }
}
.image-and-text__image {
  text-align: center;
}
.image-and-text__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.robot-in-a-poncho {
  display: block;
  margin-inline: auto;
  position: relative;
  width: 15.625rem;
}
.robot-in-a-poncho::before {
  background: var(--drawing-outline-background);
  content: "";
  display: block;
  height: 108.8809946714%;
  left: 50%;
  mask: url("/assets/robot-in-a-poncho-outline.20260920194416.svg");
  mask-size: cover;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 109.7046413502%;
}
.robot-in-a-poncho img {
  z-index: 1;
  position: relative;
}

.notes-list {
  list-style: none;
  padding: 0;
}
.notes-list__item a {
  font-weight: bold;
}
.notes-list__item__meta {
  display: block;
}

.os-menu-item {
  font-family: system-ui, sans-serif;
  line-height: 1;
}

.homepage-header {
  --base-link: currentColor;
  background: var(--page-header-background);
  box-sizing: border-box;
  color: var(--page-header-foreground);
  padding-block: 4rem;
}

.project-list {
  display: grid;
  grid-auto-rows: 1fr;
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}
.project-list__item {
  background: var(--base-highlight);
  border-radius: 0.25rem;
  padding: 1.5rem;
}
.project-list__item :where(a) {
  text-decoration-line: none;
}
.project-list__item dd {
  --u-stack-gap-multiplier: 0.5;
  margin-inline-start: 0;
}

.site-header {
  background: var(--site-header-background);
  box-sizing: border-box;
  color: var(--site-header-foreground);
  padding: 2rem var(--page-gutter);
  position: relative;
}
.site-header :where(a) {
  color: inherit;
  font-weight: bold;
  text-decoration-line: none;
}
.site-header__container.u-content__wider {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
}
.site-header__container.u-content__wider::before {
  content: "";
  flex-grow: 666;
  flex-basis: calc((43.125rem - 100%) * 666);
  height: 0.5rem;
}
.site-header__container.u-content__wider > * {
  flex-grow: 1;
}
.site-header__navigation__list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: center;
  list-style: none;
  margin: 0;
}
.site-header__navigation__list__item--active {
  position: relative;
}
.site-header__navigation__list__item--active::after {
  background: var(--base-background);
  bottom: -2rem;
  content: "";
  display: block;
  height: 0.5rem;
  left: 0;
  position: absolute;
  width: 100%;
}
.site-header__title {
  order: -1;
  text-align: center;
}
.site-header__title a {
  display: inline-block;
  position: relative;
  width: min-content;
}
.site-header__title a:focus::after, .site-header__title a:hover::after {
  background: currentColor;
  bottom: 0.125rem;
  content: "";
  display: block;
  left: 0;
  height: 0.125rem;
  position: absolute;
  transform: rotate(-1.75deg) translateY(0.0625rem);
  width: calc(100% - 0.25rem);
}
.site-header__title a:focus-visible {
  outline: none;
}
.site-header__title a:focus-visible svg {
  outline: currentColor solid 0.1875rem;
  outline-offset: 0.125rem;
}
.site-header__title svg {
  fill: currentColor;
  width: 10.9375rem;
  vertical-align: middle;
}

.site-footer {
  text-align: center;
  padding: var(--site-footer-padding-top, 4rem) var(--page-gutter) 4rem;
  position: relative;
}
.site-footer::before {
  background: var(--base-highlight);
  content: "";
  display: var(--site-footer-border-display, block);
  height: 0.125rem;
  left: 0;
  position: absolute;
  top: -0.0625rem;
  width: 100%;
}
.site-footer__navigation__list {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 1rem 2rem;
  justify-content: center;
}
@media only screen and (min-width: 30em) {
  .site-footer__navigation__list {
    flex-direction: row;
  }
}
.site-footer__navigation__list > * {
  display: inline-flex;
  justify-content: center;
}
.site-footer__navigation__list > * a {
  font-weight: bold;
}

site-preferences-dialog {
  display: contents;
}
site-preferences-dialog #open-preferences-dialog.button {
  display: flex;
  gap: 0.25rem;
  margin: 0 -0.5rem;
  padding: 0 0.5rem;
}
site-preferences-dialog #open-preferences-dialog.button::before {
  background: currentColor;
  content: "";
  display: inline-block;
  height: 1.3rem;
  margin: auto;
  mask: url("icon-settings.20260920194416.svg");
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: 100%;
  width: 1.3rem;
}
site-preferences-dialog:has(dialog[open]) #open-preferences-dialog {
  background: var(--button-background-active);
  color: var(--button-foreground);
}

.skip-links {
  background: var(--base-highlight);
  box-sizing: border-box;
  height: auto;
  left: 0;
  opacity: 0;
  padding: 2rem;
  pointer-events: none;
  position: absolute;
  transition: opacity 0.125s ease-in;
  width: 100%;
  z-index: 2;
}
.skip-links:focus-within {
  opacity: 1;
  pointer-events: auto;
}
.skip-links a {
  font-weight: bold;
  scroll-margin-top: 0.5rem;
  text-decoration-line: none;
}
.skip-links__list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  list-style: none;
}
.skip-links__list__item {
  position: relative;
}
@media only screen and (min-width: 48em) {
  .skip-links__list__item {
    text-align: center;
  }
}
.skip-links__list__item + .skip-links__list__item {
  margin-top: 0.5rem;
}

.star-rating::before {
  content: var(--stars, "☆☆☆☆☆");
  display: inline;
}
.star-rating--one {
  --stars: "★☆☆☆☆";
}
.star-rating--two {
  --stars: "★★☆☆☆";
}
.star-rating--three {
  --stars: "★★★☆☆";
}
.star-rating--four {
  --stars: "★★★★☆";
}
.star-rating--five {
  --stars: "★★★★★";
}

.timeline {
  position: relative;
}
.timeline::before {
  background: var(--base-highlight);
  content: "";
  display: block;
  height: 100%;
  left: 0.3125rem;
  position: absolute;
  width: 0.125rem;
}
.timeline__entry {
  --timeline-padding-inline-start: 2rem;
  padding-inline-start: var(--timeline-padding-inline-start);
}
@media only screen and (min-width: 30em) {
  .timeline__entry {
    --timeline-padding-inline-start: 2.5rem;
  }
}
.timeline__entry__title {
  position: relative;
}
.timeline__entry__title::before {
  background: var(--base-foreground);
  border-radius: 50%;
  content: "";
  display: block;
  height: 0.75rem;
  right: calc(100% + var(--timeline-padding-inline-start) - 0.75rem);
  position: absolute;
  top: calc(50% - 0.375rem);
  width: 0.75rem;
}

.u-anchor {
  position: absolute;
  visibility: hidden;
}

.u-cluster {
  align-items: var(--cluster-align-items, center);
  column-gap: var(--cluster-column-gap, 0.75rem);
  display: flex;
  flex-direction: var(--cluster-flex-direction, row);
  flex-wrap: var(--cluster-flex-wrap, wrap);
  justify-content: var(--cluster-justify-content, flex-start);
  row-gap: var(--cluster-row-gap, 0.75rem);
}

.u-content {
  display: grid;
  grid-column: full-width;
  grid-template-columns: [full-width-start] minmax(var(--page-gutter), 1fr) [wider-content-start] min(57.5rem, 100% - var(--page-gutter) * 2) [wider-content-end] minmax(var(--page-gutter), 1fr) [full-width-end];
  grid-template-rows: min-content;
  max-width: 100%;
}
.u-content > *:not(.u-content) {
  grid-column: wider-content;
  margin-inline: auto;
  max-width: 45rem;
  width: 100%;
}
.u-content > .u-content__full-width {
  grid-column: full-width;
}
.u-content > .u-content__full-width-with-gutters {
  grid-column: full-width;
  max-width: calc(100% - var(--page-gutter) * 2);
}
.u-content > pre, .u-content > table, .u-content > .u-content__wide {
  max-width: 49rem;
}
.u-content > .u-content__wider {
  max-width: 100%;
}
.u-content > pre, .u-content > table, .u-content > .u-content__wide--no-gutters, .u-content > .u-content__wider--no-gutters {
  grid-column: full-width;
}

.u-margin-left-auto {
  margin-inline-start: auto;
}
.u-margin-bottom-m2\.5 {
  margin-block-end: -5rem;
}

.u-stack > * {
  --u-stack-gap-multiplier: 0;
  margin-block-start: calc(2rem * var(--u-stack-gap-multiplier));
}
.u-stack > * + * {
  --u-stack-gap-multiplier: 0.5;
}
.u-stack > :where(dd + dt) {
  --u-stack-gap-multiplier: 0.5;
}
.u-stack > :where(* + h3,
* + img, * + .u-stack__1,
img + *, .u-stack__1 + *) {
  --u-stack-gap-multiplier: 1;
}
.u-stack > :where(* + h2, * + .u-stack__1\.5, .u-stack__1\.5 + *) {
  --u-stack-gap-multiplier: 1.5;
}
.u-stack > :where(h1 + *, .u-stack__2 + *, * + .u-stack__2) {
  --u-stack-gap-multiplier: 2;
}
.u-stack > :where(details + details,
dt + dd, .u-stack__0 + *, .u-stack__cozy + .u-stack__cozy, * + .u-stack__0) {
  --u-stack-gap-multiplier: 0;
}
.u-stack--flex {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.u-stack--flex > :where(.u-stack__split) {
  margin-block-end: auto;
}

.u-visually-hidden:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}