:root {
  --pink: #ffb39b;
  --yellow: #fabb19;
  --green: #17875a;
  --red: #ff5f5f;
  --turquoise: #00ced4;
  --blue-light: #90afdd;
  --blue: #5d73a3;
  --blue-dark: #314a6d;
  --navy: #14303f;
  --grey-med: #b5bac6;
  --grey-light: #ebecf0;
  --font-xs: 0.9rem;
  --font-sm: 1rem;
  --font-base: 1.2rem;
  --font-md: 1.6rem;
  --font-lg: 2.2rem;
  --font-xl: 3rem;
  --font-xxl: 3.5rem;
  --font-xxxl: 4.5rem;
  --font-xxxxl: 5.5rem;
  --border-width: 1px;
  --border-color-light: #8495b9;
  --border-color-dark: #5d73a3;
  --bg-color-light: #ebecf0;
  --bg-color-dark: #14303f;
  --bg-grain-light: url("/assets/images/archive/2022/bg-grain.png");
  --bg-grain-dark: url("/assets/images/archive/2022/bg-grain-dark.png");
  --grid-color-light: rgba(181, 186, 198, 0.3);
  --grid-color-dark: rgba(93, 115, 163, 0.3);
  --text-color-light: #14303f;
  --text-color-dark: #ffb39b;
  --selection-bg-light: #fabb19;
  --selection-bg-dark: #17875a;
  --selection-text-light: var(--text-color);
  --selection-text-dark: white;
  --btn-bg-light: rgba(20, 48, 63, 0.08);
  --btn-bg-dark: rgba(0, 0, 0, 0.2);
  --focus-text-light: #14303f;
  --focus-text-dark: white;
  --focus-bg-light: white;
  --focus-bg-dark: black;
  --focus-outline-light: #5d73a3;
  --focus-outline-dark: #fabb19;
  --pre-bg-light: rgba(255, 255, 255, 0.4);
  --pre-bg-dark: var(--btn-bg-dark);
  --callout-bg-light: rgba(255, 255, 255, 0.9);
  --callout-bg-dark: var(--btn-bg-dark);
  --color-mode: "light";
  --border-color: var(--border-color-light);
  --grid-color: var(--grid-color-light);
  --bg-color: var(--bg-color-light);
  --bg-grain: var(--bg-grain-light);
  --btn-bg: var(--btn-bg-light);
  --text-color: var(--text-color-light);
  --selection-bg: var(--selection-bg-light);
  --selection-text: var(--selection-text-light);
  --focus-text: var(--focus-text-light);
  --focus-bg: var(--focus-bg-light);
  --focus-outline: var(--focus-outline-light);
  --pre-bg: var(--pre-bg-light);
  --callout-bg: var(--callout-bg-light);
}
@media screen and (max-width: 500px) {
  :root {
    --body-padding: 1.2rem;
  }
}
@media screen and (min-width: 501px) {
  :root {
    --body-padding: 2rem;
  }
}
@media (prefers-color-scheme: dark) {
  :root {
    --color-mode: "dark";
  }
  :root:not([data-user-color-scheme]) {
    --border-color: var(--border-color-dark);
    --grid-color: var(--grid-color-dark);
    --bg-color: var(--bg-color-dark);
    --bg-grain: var(--bg-grain-dark);
    --btn-bg: var(--btn-bg-dark);
    --text-color: var(--text-color-dark);
    --selection-text: var(--selection-text-dark);
    --selection-bg: var(--selection-bg-dark);
    --focus-text: var(--focus-text-dark);
    --focus-bg: var(--focus-bg-dark);
    --focus-outline: var(--focus-outline-dark);
    --pre-bg: var(--pre-bg-dark);
    --callout-bg: var(--callout-bg-dark);
  }
}
[data-user-color-scheme="dark"] {
  --border-color: var(--border-color-dark);
  --grid-color: var(--grid-color-dark);
  --bg-color: var(--bg-color-dark);
  --bg-grain: var(--bg-grain-dark);
  --btn-bg: var(--btn-bg-dark);
  --text-color: var(--text-color-dark);
  --selection-text: var(--selection-text-dark);
  --selection-bg: var(--selection-bg-dark);
  --focus-text: var(--focus-text-dark);
  --focus-bg: var(--focus-bg-dark);
  --focus-outline: var(--focus-outline-dark);
  --pre-bg: var(--pre-bg-dark);
  --callout-bg: var(--callout-bg-dark);
}
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
@font-face {
  font-family: "CabinetGrotesk-Variable";
  src:
    url("/assets/fonts/archive/2022/CabinetGrotesk-Variable.woff2")
      format("woff2"),
    url("/assets/fonts/archive/2022/CabinetGrotesk-Variable.woff")
      format("woff"),
    url("/assets/fonts/archive/2022/CabinetGrotesk-Variable.ttf")
      format("truetype");
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "GeneralSans-Variable";
  src:
    url("/assets/fonts/archive/2022/GeneralSans-Variable.woff2") format("woff2"),
    url("/assets/fonts/archive/2022/GeneralSans-Variable.woff") format("woff"),
    url("/assets/fonts/archive/2022/GeneralSans-Variable.ttf")
      format("truetype");
  font-weight: 200 700;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "GeneralSans-VariableItalic";
  src:
    url("/assets/fonts/archive/2022/GeneralSans-VariableItalic.woff2")
      format("woff2"),
    url("/assets/fonts/archive/2022/GeneralSans-VariableItalic.woff")
      format("woff"),
    url("/assets/fonts/archive/2022/GeneralSans-VariableItalic.ttf")
      format("truetype");
  font-weight: 200 700;
  font-display: swap;
  font-style: italic;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
::selection {
  background-color: var(--text-color);
  color: var(--bg-color);
  fill: var(--bg-color);
}
html,
body {
  background-color: var(--bg-color);
}
body {
  min-height: 100vh;
  width: 100%;
  height: 100%;
  font-family: "GeneralSans-Variable", Helvetica, sans-serif;
  font-size: var(--font-base);
  font-weight: 350;
  line-height: 1.4;
  color: var(--text-color);
}
.visually-hidden,
.screenreader {
  height: 1px;
  width: 1px;
  position: absolute;
  display: block;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(1px);
  white-space: nowrap;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
.preload * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
}
.center {
  text-align: center;
}
.hidden {
  display: none;
}
.mb0 {
  margin-bottom: 0 !important;
}
h1,
h2,
h3 {
  font-family: "CabinetGrotesk-Variable", Helvetica, sans-serif;
  line-height: 1.1;
}
h1 em,
h2 em,
h3 em {
  font-family: inherit;
  font-style: italic;
}
h1 {
  font-size: var(--font-xxl);
  font-weight: 800;
}
@media screen and (max-width: 700px) {
  h1 {
    font-size: var(--font-xl);
  }
}
@media screen and (max-width: 500px) {
  h1 {
    font-size: var(--font-lg);
  }
}
h2 {
  font-size: var(--font-lg);
  font-weight: 700;
}
@media screen and (max-width: 700px) {
  h2 {
    font-size: var(--font-md);
  }
}
h3 {
  font-size: var(--font-base);
  font-weight: 700;
}
.big-text {
  font-size: var(--font-md);
}
em {
  font-family: "GeneralSans-VariableItalic", Helvetica, sans-serif;
  font-weight: inherit;
  font-style: italic;
}
strong {
  font-weight: 550;
}
small,
.small {
  font-size: var(--font-sm);
  font-weight: 400;
}
figcaption {
  font-size: var(--font-xs);
  font-weight: 400;
}
p code,
ul code,
h2 code {
  padding: 3px 5px;
  background-color: var(--btn-bg);
  border: var(--border-width) solid var(--border-color);
  font-size: var(--font-sm);
  font-weight: 500;
  color: inherit;
  align-self: center;
}
h2 code {
  margin: -0.15em 0.2em 0;
  display: inline-block;
  vertical-align: middle;
}
pre,
code {
  font-family: monospace;
  border-radius: 3px;
  font-size: var(--font-sm);
}
pre {
  white-space: pre-wrap;
  overflow: auto;
}
@media screen and (max-width: 400px) {
  pre code {
    font-size: 0.85rem;
  }
}
.no-js pre {
  padding: 0 0.5em;
  background-color: var(--text-color);
  color: var(--bg-color);
}
:root {
  --text-decoration: #17875a;
}
a {
  color: var(--text-color);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: var(--text-decoration);
  text-decoration-thickness: var(--border-width);
  text-underline-offset: 2px;
}
a:hover {
  text-decoration-thickness: 2px;
}
a:focus:focus-visible {
  color: var(--focus-text);
  background-color: var(--focus-bg);
  outline: var(--border-width) solid var(--focus-outline);
  text-decoration: none;
}
a:focus:not(:focus-visible) {
  outline: none;
}
a:active {
  transform: translateY(1px);
}
a.button {
  background-color: var(--btn-bg);
}
a.button:focus:focus-visible {
  background-color: var(--focus-bg);
  outline: none;
  box-shadow: inset 0 0 0 1px var(--focus-outline);
}
a.skip-link {
  padding: 0.4em;
  position: fixed;
  left: 1em;
  top: 1em;
  background-color: var(--focus-bg);
  box-shadow: 5px 5px 0 var(--border-color);
  border: var(--border-width) solid var(--focus-outline);
  clip: rect(0 0 0 0);
  z-index: 200;
  transition: none;
}
a.skip-link:hover {
  background-color: #fabb19;
  color: inherit;
}
a.skip-link:focus {
  clip: unset;
  outline: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-user-color-scheme]) a.button {
    color: var(--text-color);
  }
}
[data-user-color-scheme="dark"] a.button {
  color: var(--text-color);
}
:root {
  --svg-blend-mode: multiply;
}
.svg svg * {
  vector-effect: non-scaling-stroke;
}
.svg svg {
  mix-blend-mode: var(--svg-blend-mode);
}
.dropzone:has(.potion:not(.gu-transit)) svg {
  --svg-blend-mode: normal;
}
.dropzone:has(.potion:not(.gu-transit)) svg [class^="fill-yellow"] * {
  fill: #fabb19;
}
.dropzone:has(.potion:not(.gu-transit)) svg [class^="fill-blue"] * {
  fill: #5d73a3;
}
.dropzone:has(.potion:not(.gu-transit)) svg [class^="fill-turquoise"] * {
  fill: #00ced4;
}
.dropzone:has(.potion:not(.gu-transit)) svg [class^="fill-red"] * {
  fill: #ff5f5f;
}
.dropzone:has(.potion:not(.gu-transit)) svg [class^="fill-pink"] * {
  fill: #ffb39b;
}
.dropzone:has(.potion:not(.gu-transit)) svg [class^="fill-white"] * {
  fill: white;
}
.dropzone:has(.potion:not(.gu-transit)) svg [class^="fill-grey-light"] * {
  fill: #ebecf0;
}
.dropzone:has(.potion:not(.gu-transit)) svg [class^="fill-grey-med"] * {
  fill: #b5bac6;
}
.dropzone:has(.potion:not(.gu-transit)) svg [class^="fill-navy"] * {
  fill: #14303f;
}
.dropzone:has(.potion:not(.gu-transit)) svg [class^="fill-green"] * {
  fill: #17875a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-user-color-scheme]) svg {
    --svg-blend-mode: exclusion;
  }
}
[data-user-color-scheme="dark"] svg {
  --svg-blend-mode: exclusion;
}
.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 25px;
  height: 0;
}
.video-container object,
.video-container embed,
.video-container iframe,
.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
video {
  background-color: transparent;
}
.loot,
.no-js .loot {
  display: none;
}
:root {
  --draggable-dot: var(--border-color);
}
@supports selector(:has(img)) {
  .loot {
    display: flex;
  }
}
.draggable {
  touch-action: none;
}
.draggable:hover {
  cursor: grab;
}
.draggable.gu-mirror {
  cursor: grabbing;
}
.dropzone {
  position: relative;
}
.dropzone::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 0.4rem var(--text-color);
  transition: opacity 100ms ease-in-out;
}
.dropzone.over:not(.invalid)::after {
  opacity: 0.4;
}
.dropzone .draggable.gu-transit {
  display: none;
}
.dropzone .draggable:not(.gu-transit) {
  position: absolute;
  top: 5px;
  cursor: default;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--draggable-dot);
}
.dropzone .draggable:not(.gu-transit) svg {
  display: none;
}
.dropzone .draggable:not(.gu-transit):first-of-type {
  right: 5px;
}
.dropzone .draggable:not(.gu-transit):nth-of-type(2) {
  right: 20px;
}
.dropzone .draggable:not(.gu-transit):nth-of-type(3) {
  right: 35px;
}
.dropzone .draggable:not(.gu-transit):nth-of-type(4) {
  right: 50px;
}
.gu-mirror {
  position: fixed !important;
  margin: 0 !important;
  z-index: 9999 !important;
  opacity: 0.8;
}
.gu-hide {
  display: none !important;
}
.gu-unselectable {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}
.gu-transit {
  opacity: 0.3;
}
:root {
  --font-nav: var(--font-sm);
  --nav-padding: 0.7em;
  --nav-shadow: rgba(20, 48, 63, 0.2);
  --loot-shadow: #b5bac6;
  --loot-outline: white;
  --toggle-sun: 1;
  --toggle-moon: 0;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-user-color-scheme]) {
    --nav-shadow: rgba(0, 0, 0, 0.4);
    --loot-shadow: black;
    --loot-outline: #b5bac6;
    --toggle-sun: 0;
    --toggle-moon: 1;
  }
}
[data-user-color-scheme="dark"] {
  --nav-shadow: rgba(0, 0, 0, 0.4);
  --loot-shadow: black;
  --loot-outline: #b5bac6;
  --toggle-sun: 0;
  --toggle-moon: 1;
}
.main-nav {
  align-items: stretch;
  z-index: 100;
  background-color: var(--border-color);
  border-bottom: var(--border-width) solid var(--border-color);
  box-shadow: 0 0 0 transparent;
  line-height: 1.2;
  transition: box-shadow 200ms ease-in-out;
}
.main-nav.scrolling {
  box-shadow: 0 0.2em 0.2em var(--nav-shadow);
}
.main-nav a {
  text-decoration: none;
}
.main-nav a:hover {
  text-decoration: underline;
  text-decoration-color: var(--text-decoration);
  text-decoration-thickness: var(--border-width);
  text-underline-offset: 2px;
}
.main-nav nav {
  min-height: 60px;
  gap: var(--border-width);
  font-size: var(--font-nav);
}
.main-nav nav > * {
  background-color: var(--bg-color);
  background-image: var(--bg-grain);
  background-size: 350px auto;
}
.nav-pages,
.nav-home,
.toggle-button {
  display: flex;
  justify-content: center;
  align-items: center;
}
.nav-pages,
.nav-home {
  padding: var(--nav-padding);
}
.nav-pages {
  flex: 1;
  flex-wrap: wrap;
  gap: 0.1em clamp(0.6em, 2vw, 2em);
}
.mode-toggle {
  display: grid;
  place-content: center;
}
.toggle-button {
  background-color: transparent;
  border: none;
  color: var(--text-color);
  font: inherit;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
}
.toggle-button:hover .toggle-text {
  text-decoration: underline;
  text-decoration-color: var(--text-decoration);
  text-decoration-thickness: var(--border-width);
  text-underline-offset: 2px;
}
.toggle-button:focus:focus-visible {
  outline: none;
  color: var(--focus-text);
  background-color: var(--focus-bg);
  box-shadow: inset 0 0 0 1px var(--focus-outline);
}
.toggle-button:focus:focus-visible svg path,
.toggle-button:focus:focus-visible svg circle,
.toggle-button:focus:focus-visible svg line {
  stroke: var(--focus-text);
}
.toggle-button:focus:not(:focus-visible) {
  outline: none;
}
.toggle-button:active {
  transform: translateY(1px);
}
.toggle-icon {
  width: 1.5em;
  height: 1.5em;
  margin-right: 0.3em;
  margin-top: -0.1em;
}
.toggle-icon svg {
  width: 100%;
  height: auto;
}
.toggle-icon svg #sun {
  opacity: var(--toggle-sun);
}
.toggle-icon svg #moon {
  opacity: var(--toggle-moon);
}
.toggle-icon svg path,
.toggle-icon svg circle,
.toggle-icon svg line {
  stroke: var(--text-color);
  vector-effect: none;
}
.loot {
  justify-content: center;
  align-items: center;
  gap: 0 0.3rem;
  padding: calc(var(--nav-padding) / 2.5) var(--nav-padding);
  font-size: var(--font-nav);
  background-color: var(--bg-color);
  background-image: var(--bg-grain);
  background-size: 350px auto;
}
.loot .draggable {
  margin-top: 0.2em;
  flex-shrink: 1;
}
.loot .draggable svg {
  width: 100%;
  height: auto;
  max-height: 3em;
}
.loot .draggable svg .shadow {
  fill: var(--loot-shadow);
}
.loot .draggable svg .outline path {
  fill: var(--loot-outline);
}
body.no-js .mode-toggle {
  display: none;
}
body.no-js .main-nav nav {
  display: flex;
}
@media screen and (max-width: 500px) {
  body.no-js .nav-home {
    padding: var(--nav-padding) calc(var(--nav-padding) * 2);
  }
}
@media screen and (min-width: 501px) {
  body.no-js .nav-home,
  body.no-js .nav-pages {
    padding: var(--nav-padding) var(--body-padding);
  }
  body.no-js .nav-pages {
    justify-content: flex-end;
  }
}
body:not(.no-js) .main-nav nav {
  display: flex;
  flex-wrap: wrap;
}
body:not(.no-js) .nav-home,
body:not(.no-js) .mode-toggle {
  padding: var(--nav-padding) var(--body-padding);
}
@media screen and (max-width: 500px) {
  body:not(.no-js) .nav-home {
    flex: 1;
  }
  body:not(.no-js) .mode-toggle {
    order: 2;
  }
  body:not(.no-js) .nav-pages {
    order: 3;
    flex-basis: 100%;
    justify-content: space-evenly;
  }
}
@supports selector(:has(img)) {
  body:not(.no-js) .main-nav {
    position: sticky;
    top: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--border-width);
  }
  body:not(.no-js) .main-nav nav {
    display: grid;
    grid-column: span 5;
    grid-template-columns: repeat(5, 1fr);
  }
  body:not(.no-js) .nav-home,
  body:not(.no-js) .mode-toggle {
    padding: var(--nav-padding);
  }
  body:not(.no-js) .nav-pages {
    grid-column: span 3;
  }
  @media screen and (max-width: 700px) {
    body:not(.no-js) .main-nav {
      grid-template-columns: 2fr 1fr;
    }
    body:not(.no-js) .main-nav nav {
      grid-column: 1;
      grid-template-columns: 1fr 1fr;
    }
    body:not(.no-js) .nav-pages {
      grid-row: 2;
      grid-column: 1/-1;
      justify-content: space-evenly;
    }
  }
}
.main-nav:has(nav .mushroom:not(.gu-transit)) {
  --font-nav: var(--font-base);
}
.main-nav:has(nav .mushroom:not(.gu-transit)) nav {
  grid-template-columns: 1fr 1fr;
}
.main-nav:has(nav .mushroom:not(.gu-transit)) .nav-pages {
  grid-row: 2;
  grid-column: 1/-1;
  justify-content: space-evenly;
}
.main-nav:has(nav .mushroom ~ .mushroom:not(.gu-transit)) {
  --font-nav: var(--font-md);
}
.main-nav:has(nav .mushroom ~ .mushroom:not(.gu-transit)) .loot {
  flex-direction: column;
}
.main-nav:has(nav .potion:not(.gu-transit)) {
  --bg-color: #00ced4;
  --border-color: #14303f;
  --text-color: #14303f;
  --loot-shadow: #5d73a3;
  --loot-outline: white;
  --draggable-dot: #5d73a3;
  --focus-text: #14303f;
  --focus-outline: #5d73a3;
  --focus-bg: white;
  --text-decoration: #314a6d;
}
.main-nav:has(nav .potion:not(.gu-transit)) nav > *,
.main-nav:has(nav .potion:not(.gu-transit)) .loot {
  background-image: none;
}
.main-nav:has(nav .potion ~ .potion:not(.gu-transit)) {
  --bg-color: #fabb19;
  --draggable-dot: #ff5f5f;
  --focus-outline: #ff5f5f;
  --text-decoration: #ff5f5f;
}
.main-header {
  min-height: 11rem;
  display: grid;
  gap: var(--border-width);
  align-items: stretch;
  background-color: var(--border-color);
  border-bottom: var(--border-width) solid var(--border-color);
}
.main-header > :not(.draggable) {
  padding: var(--body-padding);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-color);
  background-color: var(--bg-color);
  background-image: var(--bg-grain);
  background-size: 350px auto;
}
.main-header h1 {
  margin: 0;
  text-align: center;
}
.main-header .content {
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.main-header .callout {
  display: grid;
  place-content: center;
}
.main-header .callout > span {
  display: flex;
  justify-content: center;
  gap: 0.25em;
}
.main-header .callout a {
  text-decoration: none;
}
.main-header .callout a:hover {
  text-decoration: underline;
  text-decoration-color: var(--text-decoration);
  text-decoration-thickness: var(--border-width);
  text-underline-offset: 2px;
}
@media screen and (min-width: 701px) {
  .main-header {
    grid-template-columns: repeat(3, 1fr);
  }
  .main-header > :only-child {
    grid-column: 1/-1;
  }
  .main-header > :first-child:not(:only-child) {
    grid-column: span 2;
  }
}
.main-header:has(.mushroom:not(.gu-transit)) h1 {
  font-size: var(--font-xxxl);
}
@media screen and (max-width: 700px) {
  .main-header:has(.mushroom:not(.gu-transit)) h1 {
    font-size: var(--font-xxl);
  }
}
@media screen and (max-width: 500px) {
  .main-header:has(.mushroom:not(.gu-transit)) h1 {
    font-size: var(--font-xl);
  }
}
.main-header:has(.mushroom:not(.gu-transit)) .callout {
  font-size: var(--font-md);
}
.main-header:has(.mushroom:not(.gu-transit)) small,
.main-header:has(.mushroom:not(.gu-transit)) .small {
  font-size: var(--font-base);
}
.main-header:has(.mushroom ~ .mushroom:not(.gu-transit)) h1 {
  font-size: var(--font-xxxxl);
}
@media screen and (max-width: 700px) {
  .main-header:has(.mushroom ~ .mushroom:not(.gu-transit)) h1 {
    font-size: var(--font-xxxl);
  }
}
@media screen and (max-width: 500px) {
  .main-header:has(.mushroom ~ .mushroom:not(.gu-transit)) h1 {
    font-size: var(--font-xxl);
  }
}
.main-header:has(.mushroom ~ .mushroom:not(.gu-transit)) .callout {
  font-size: var(--font-lg);
}
.main-header:has(.mushroom ~ .mushroom:not(.gu-transit)) small,
.main-header:has(.mushroom ~ .mushroom:not(.gu-transit)) .small {
  font-size: var(--font-md);
}
.main-header:has(.potion:not(.gu-transit)) {
  --bg-color: #ff5f5f;
  --border-color: #14303f;
  --text-color: white;
  --draggable-dot: #fabb19;
  --focus-text: #14303f;
  --focus-outline: #fabb19;
  --focus-bg: white;
  --text-decoration: #fabb19;
}
.main-header:has(.potion:not(.gu-transit)) > :not(.draggable) {
  background-image: none;
}
.main-header:has(.potion ~ .potion:not(.gu-transit)) {
  --bg-color: #ffb39b;
  --text-color: #14303f;
  --draggable-dot: #ff5f5f;
  --focus-text: #14303f;
  --focus-outline: #ff5f5f;
  --focus-bg: white;
  --text-decoration: #ff5f5f;
}
main {
  display: grid;
  gap: var(--border-width);
  background-color: var(--border-color);
}
main > * {
  background-color: var(--bg-color);
  background-image: var(--bg-grain);
  background-size: 350px auto;
}
@media screen and (max-width: 500px) {
  #illustration {
    padding-top: 1.2em;
  }
}
@media screen and (min-width: 501px) {
  #illustration {
    padding-top: 2.5em;
  }
}
.tagline {
  grid-column: 1/-1;
  padding: calc(var(--body-padding) * 2) var(--body-padding)
    calc(var(--body-padding) * 3);
  display: grid;
  place-content: center;
  text-align: center;
}
.tagline h1 {
  max-width: 22ch;
}
hr {
  height: 1px;
  margin: 0;
  background-color: var(--border-color);
  border: none;
}
.content * + * {
  margin-top: 1.2em;
}
.content ul:not(.unstyled) {
  padding-left: 1.3em;
  list-style-type: disc;
}
.content ul li + li {
  margin-top: 0.5em;
}
.content video,
.content figure {
  max-width: 100%;
}
.content video {
  margin-top: 1.4em;
}
.content video + p {
  margin-top: 1.4em;
}
.content figure > a {
  display: block;
  box-shadow: 0 0 0 transparent;
  transition: box-shadow 150ms ease-in-out;
}
.content figure > a:focus-visible {
  box-shadow:
    0 0 0 5px white,
    0 0 0 6px var(--focus-outline);
  outline: none;
}
.content figure > a:hover {
  box-shadow:
    0 0 0 5px var(--bg-color),
    0 0 0 6px var(--border-color);
}
.content source + img {
  margin-top: 0;
}
.content p + small {
  margin-top: 1.6em;
  display: block;
}
.content hr {
  margin: 1.5em 0 0.5em;
}
.content blockquote:not(.tweet-text) {
  border-left: var(--border-width) solid var(--border-color);
  padding: 0.7em;
  padding-left: 1.5em;
  position: relative;
}
.content blockquote:not(.tweet-text)::after {
  content: "“";
  display: block;
  position: absolute;
  left: 0;
  top: 1.3em;
  transform: translateX(-50%);
  font-size: var(--font-md);
  line-height: 0;
}
.content blockquote:not(.tweet-text)::before {
  content: "";
  width: 1.3em;
  height: 1.3em;
  display: block;
  position: absolute;
  left: 0;
  top: 0.8em;
  transform: translateX(-50%);
  background-color: var(--bg-color);
  border: var(--border-width) solid var(--border-color);
  border-radius: 50%;
}
.content blockquote:not(.tweet-text) cite {
  margin-top: 0.5em;
  display: block;
  text-align: right;
  font-size: var(--font-sm);
}
.content blockquote:not(.tweet-text) cite::before {
  content: "—";
}
.content .footnote {
  margin-top: 0.25em;
  display: block;
  text-align: center;
}
.content .callout {
  border: 1px dashed var(--border-color);
  padding: 1em;
  font-size: var(--font-sm);
}
.twitter-tweet {
  max-width: 550px;
  padding: 1em;
  background-color: var(--callout-bg);
  border: var(--border-width) solid var(--border-color);
  border-radius: 5px;
}
.twitter-tweet .tweet-author {
  display: grid;
  grid-template-columns: 2.3em 1fr auto;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "avatar name logo" "avatar handle logo";
  gap: 0 0.5em;
  line-height: 1;
}
.twitter-tweet .tweet-author > * {
  margin: 0;
}
.twitter-tweet .author-avatar {
  grid-area: avatar;
  border-radius: 50%;
}
.twitter-tweet .author-name {
  grid-area: name;
  text-decoration: none;
}
.twitter-tweet .author-name:hover {
  text-decoration: underline;
  text-decoration-color: var(--text-decoration);
  text-decoration-thickness: var(--border-width);
  text-underline-offset: 2px;
}
.twitter-tweet .author-handle {
  grid-area: handle;
  text-decoration: none;
}
.twitter-tweet .author-handle:hover {
  text-decoration: underline;
  text-decoration-color: var(--text-decoration);
  text-decoration-thickness: var(--border-width);
  text-underline-offset: 2px;
}
.twitter-tweet .twitter-logo {
  grid-area: logo;
}
.twitter-tweet .twitter-logo svg {
  width: 1.5em;
  height: 1.5em;
}
.twitter-tweet .twitter-logo svg path {
  fill: var(--text-color);
}
.twitter-tweet .tweet-data {
  padding-top: 0.5em;
  display: flex;
  justify-content: space-between;
  gap: 0.5em;
  border-top: var(--border-width) solid var(--border-color);
  opacity: 0.7;
}
.twitter-tweet .tweet-data small {
  margin: 0;
  font-size: var(--font-xs);
}
.twitter-tweet .tweet-data a {
  text-decoration: none;
}
.twitter-tweet .tweet-data a:hover {
  text-decoration: underline;
  text-decoration-color: var(--text-decoration);
  text-decoration-thickness: var(--border-width);
  text-underline-offset: 2px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-user-color-scheme]) .main-footer {
    --icon-hover: #00ced4;
  }
}
[data-user-color-scheme="dark"] .main-footer {
  --icon-hover: #00ced4;
}
.main-footer {
  --font-footer: var(--font-sm);
  --icon-hover: #5d73a3;
  padding: var(--body-padding);
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  font-size: var(--font-footer);
  background-color: var(--bg-color);
  background-image: var(--bg-grain);
  background-size: 350px auto;
  border-top: var(--border-width) solid var(--border-color);
}
@media screen and (max-width: 700px) {
  .main-footer {
    flex-direction: column;
    align-items: center;
  }
}
@media screen and (min-width: 701px) {
  .main-footer {
    justify-content: space-between;
  }
}
.main-footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.3em 1em;
}
.main-footer nav a:not(.social) {
  text-decoration: none;
}
.main-footer nav a:not(.social):hover {
  text-decoration: underline;
  text-decoration-color: var(--text-decoration);
  text-decoration-thickness: var(--border-width);
  text-underline-offset: 2px;
}
.main-footer .social {
  width: 2em;
  height: 2em;
  transform: scale(1) rotate(0);
  transition: transform 100ms ease-in-out;
}
.main-footer .social svg {
  width: 100%;
  height: auto;
}
.main-footer .social svg path {
  fill: var(--text-color);
  transition: fill 100ms ease-in-out;
}
.main-footer .social:focus:focus-visible {
  padding: 0.2em;
  background-color: transparent;
  transform: scale(1.2) rotate(0);
}
.main-footer .social:focus:focus-visible svg path {
  fill: var(--icon-hover);
}
.main-footer .social:hover svg path {
  fill: var(--icon-hover);
}
.main-footer .social:nth-child(odd):hover {
  transform: scale(1.15) rotate(5deg);
}
.main-footer .social:nth-child(even):hover {
  transform: scale(1.15) rotate(-5deg);
}
.main-footer .reset {
  display: none;
  --reset-bg: var(--text-color);
  --reset-text: var(--bg-color);
  padding: 0.4em 0.8em;
  background-color: var(--reset-bg);
  outline: none;
  border: none;
  border-radius: 4px;
  color: var(--reset-text);
  font-weight: 700;
  font-size: var(--font-footer);
  cursor: pointer;
}
.main-footer .reset:hover {
  background-color: var(--icon-hover);
}
.main-footer .reset:active {
  transform: translateY(1px);
}
.main-footer .reset:focus:focus-visible {
  color: var(--focus-text);
  background-color: var(--focus-bg);
  outline: var(--border-width) solid var(--focus-outline);
}
.main-footer:has(.mushroom:not(.gu-transit)) {
  --font-footer: var(--font-base);
}
.main-footer:has(.mushroom ~ .mushroom:not(.gu-transit)) {
  --font-footer: var(--font-md);
}
.main-footer:has(.potion:not(.gu-transit)) {
  --bg-color: #ff5f5f;
  --text-color: white;
  --draggable-dot: #fabb19;
  --text-decoration: #fabb19;
  --icon-hover: #ffb39b;
  --focus-text: #14303f;
  --focus-outline: #ffb39b;
  --focus-bg: white;
  background-image: none;
}
.main-footer:has(.potion ~ .potion:not(.gu-transit)) {
  --bg-color: #5d73a3;
  --focus-text: #14303f;
  --focus-outline: #00ced4;
  --focus-bg: white;
  --text-decoration: #00ced4;
  --icon-hover: #00ced4;
}
@supports selector(:has(img)) {
  body:not(.no-js) .main-footer .reset {
    display: block;
  }
}
.home-header {
  --home-header-height: 410px;
  --home-potion-bg: #ffb39b;
  width: 100%;
  height: var(--home-header-height);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: var(--bg-color);
  background-image: var(--bg-grain);
  background-size: 350px auto;
}
.home-header::after {
  height: 82.2%;
}
.home-header .svg {
  width: 100%;
  display: grid;
  justify-content: center;
}
.home-header .svg #horizon {
  transform-origin: center center;
  transform: scaleX(5);
}
.home-header svg {
  padding: 0;
  display: block;
  height: var(--home-header-height);
  width: auto;
  overflow: visible;
}
.home-header #soda-bottle,
.home-header #soda-cup {
  opacity: 0;
}
.home-header:has(.mushroom:not(.gu-transit)) {
  --home-header-height: 500px;
}
.home-header:has(.mushroom:not(.gu-transit)) #soda-can {
  opacity: 0;
}
.home-header:has(.mushroom:not(.gu-transit)) #soda-bottle {
  opacity: 1;
}
.home-header:has(.mushroom ~ .mushroom:not(.gu-transit)) {
  --home-header-height: 600px;
}
.home-header:has(.mushroom ~ .mushroom:not(.gu-transit)) #soda-bottle {
  opacity: 0;
}
.home-header:has(.mushroom ~ .mushroom:not(.gu-transit)) #soda-cup {
  opacity: 1;
}
.home-header:has(.potion:not(.gu-transit)) {
  --draggable-dot: #ff5f5f;
}
.home-header:has(.potion:not(.gu-transit)) .svg {
  background-repeat: no-repeat;
  background-image: linear-gradient(#14303f, #14303f),
    linear-gradient(var(--home-potion-bg), var(--home-potion-bg));
  background-size:
    100% var(--border-width),
    100% 82%;
  background-position:
    0 82%,
    0 0;
}
.home-header:has(.potion:not(.gu-transit)) #horizon {
  opacity: 0;
}
.home-header:has(.potion:not(.gu-transit)) #polaroid-cover rect {
  fill: #ffb39b;
}
.home-header:has(.potion ~ .potion:not(.gu-transit)) {
  --draggable-dot: #fabb19;
}
.home-header:has(.potion ~ .potion:not(.gu-transit))::after {
  height: 100%;
}
.home-header:has(.potion ~ .potion:not(.gu-transit)) #default,
.home-header:has(.potion ~ .potion:not(.gu-transit)) #computer-shadow {
  display: none;
}
.home-header:has(.potion ~ .potion:not(.gu-transit)) #potion2 {
  opacity: 1;
}
.home-header:has(.potion ~ .potion:not(.gu-transit)) .svg {
  background-image: none;
}
.home-header:has(.potion ~ .potion:not(.gu-transit)) #computer,
.home-header:has(.potion ~ .potion:not(.gu-transit)) #rainbow,
.home-header:has(.potion ~ .potion:not(.gu-transit)) [class^="twinkle"] {
  transform-box: fill-box;
}
.home-header:has(.potion ~ .potion:not(.gu-transit)) #computer {
  transform: translate(0, -3.8em);
  transform-origin: center center;
  animation: float 1000ms ease-in-out alternate-reverse infinite;
}
@media (prefers-reduced-motion) {
  .home-header:has(.potion ~ .potion:not(.gu-transit)) #computer {
    animation: none;
  }
}
.home-header:has(.potion ~ .potion:not(.gu-transit)) #rainbow {
  opacity: 0;
  transform-origin: center bottom;
  animation: rainbow 600ms ease-out forwards;
  animation-delay: 500ms;
}
@media (prefers-reduced-motion) {
  .home-header:has(.potion ~ .potion:not(.gu-transit)) #rainbow {
    opacity: 1;
    transform: scaleY(8);
    animation: none;
  }
}
.home-header:has(.potion ~ .potion:not(.gu-transit)) [class^="twinkle"] {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center center;
  animation: twinkle 3000ms linear infinite;
}
@media (prefers-reduced-motion) {
  .home-header:has(.potion ~ .potion:not(.gu-transit)) [class^="twinkle"] {
    opacity: 1;
    animation: none;
  }
}
.home-header:has(.potion ~ .potion:not(.gu-transit)) .twinkle1 {
  animation-delay: 500ms;
}
.home-header:has(.potion ~ .potion:not(.gu-transit)) .twinkle2 {
  animation-delay: 800ms;
}
.home-header:has(.potion ~ .potion:not(.gu-transit)) .twinkle3 {
  animation: none;
}
.home-header:has(.potion ~ .potion:not(.gu-transit)) .twinkle4 {
  animation-delay: 1500ms;
}
.home-header:has(.potion ~ .potion:not(.gu-transit)) [id^="hello"] text {
  animation: hello 3000ms infinite;
}
@media (prefers-reduced-motion) {
  .home-header:has(.potion ~ .potion:not(.gu-transit)) [id^="hello"] text {
    animation: none;
  }
}
.home-header:has(.potion ~ .potion:not(.gu-transit)) #hello-world1 text {
  fill: #ff5f5f;
}
.home-header:has(.potion ~ .potion:not(.gu-transit)) #hello-world2 text {
  fill: #fabb19;
  animation-delay: -1000ms;
}
.home-header:has(.potion ~ .potion:not(.gu-transit)) #hello-world3 * {
  fill: inherit;
  animation-delay: -2000ms;
}
.home-header:has(.potion ~ .potion:not(.gu-transit)) #hello-world4 text {
  fill: #ff5f5f;
  animation-delay: -3000ms;
}
.home-header:has(.potion ~ .potion:not(.gu-transit)) #hello-world5 text {
  fill: #fabb19;
  animation-delay: -4000ms;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-user-color-scheme])
    .home-header:not(:has(.potion:not(.gu-transit)))
    #horizon
    line,
  :root:not([data-user-color-scheme])
    .home-header:not(:has(.potion:not(.gu-transit)))
    #stems
    path {
    stroke: #5d73a3;
  }
  :root:not([data-user-color-scheme])
    .home-header:has(.potion:not(.gu-transit)) {
    --draggable-dot: #00ced4;
    --home-potion-bg: #5d73a3;
  }
  :root:not([data-user-color-scheme])
    .home-header:has(.potion:not(.gu-transit))
    #computer-shadow
    path {
    stroke: #5d73a3;
    fill: #5d73a3;
  }
  :root:not([data-user-color-scheme])
    .home-header:has(.potion:not(.gu-transit))
    #polaroid-cover
    rect {
    fill: var(--home-potion-bg);
  }
  :root:not([data-user-color-scheme])
    .home-header:has(.potion:not(.gu-transit))
    #leaves-dark
    path,
  :root:not([data-user-color-scheme])
    .home-header:has(.potion:not(.gu-transit))
    #head-bg
    polygon {
    fill: #ffb39b;
  }
  :root:not([data-user-color-scheme])
    .home-header:has(.potion ~ .potion:not(.gu-transit)) {
    --draggable-dot: #fabb19;
  }
}
[data-user-color-scheme="dark"]
  .home-header:not(:has(.potion:not(.gu-transit)))
  #horizon
  line,
[data-user-color-scheme="dark"]
  .home-header:not(:has(.potion:not(.gu-transit)))
  #stems
  path {
  stroke: #5d73a3;
}
[data-user-color-scheme="dark"] .home-header:has(.potion:not(.gu-transit)) {
  --draggable-dot: #00ced4;
  --home-potion-bg: #5d73a3;
}
[data-user-color-scheme="dark"]
  .home-header:has(.potion:not(.gu-transit))
  #computer-shadow
  path {
  stroke: #5d73a3;
  fill: #5d73a3;
}
[data-user-color-scheme="dark"]
  .home-header:has(.potion:not(.gu-transit))
  #polaroid-cover
  rect {
  fill: var(--home-potion-bg);
}
[data-user-color-scheme="dark"]
  .home-header:has(.potion:not(.gu-transit))
  #leaves-dark
  path,
[data-user-color-scheme="dark"]
  .home-header:has(.potion:not(.gu-transit))
  #head-bg
  polygon {
  fill: #ffb39b;
}
[data-user-color-scheme="dark"]
  .home-header:has(.potion ~ .potion:not(.gu-transit)) {
  --draggable-dot: #fabb19;
}
@-moz-keyframes polaroid-move {
  0% {
    transform: translate(0, 0);
  }
  10%,
  50% {
    transform: translate(0, 2em);
  }
  50%,
  60% {
    transform: translate(0, 0);
  }
}
@-webkit-keyframes polaroid-move {
  0% {
    transform: translate(0, 0);
  }
  10%,
  50% {
    transform: translate(0, 2em);
  }
  50%,
  60% {
    transform: translate(0, 0);
  }
}
@-o-keyframes polaroid-move {
  0% {
    transform: translate(0, 0);
  }
  10%,
  50% {
    transform: translate(0, 2em);
  }
  50%,
  60% {
    transform: translate(0, 0);
  }
}
@keyframes polaroid-move {
  0% {
    transform: translate(0, 0);
  }
  10%,
  50% {
    transform: translate(0, 2em);
  }
  50%,
  60% {
    transform: translate(0, 0);
  }
}
@-moz-keyframes float {
  0% {
    transform: translate(0, -3.8em);
  }
  100% {
    transform: translate(0, -4.2em);
  }
}
@-webkit-keyframes float {
  0% {
    transform: translate(0, -3.8em);
  }
  100% {
    transform: translate(0, -4.2em);
  }
}
@-o-keyframes float {
  0% {
    transform: translate(0, -3.8em);
  }
  100% {
    transform: translate(0, -4.2em);
  }
}
@keyframes float {
  0% {
    transform: translate(0, -3.8em);
  }
  100% {
    transform: translate(0, -4.2em);
  }
}
@-moz-keyframes rainbow {
  0% {
    opacity: 0;
    transform: scaleY(1);
  }
  2%,
  100% {
    opacity: 1;
  }
  100% {
    transform: scaleY(8);
  }
}
@-webkit-keyframes rainbow {
  0% {
    opacity: 0;
    transform: scaleY(1);
  }
  2%,
  100% {
    opacity: 1;
  }
  100% {
    transform: scaleY(8);
  }
}
@-o-keyframes rainbow {
  0% {
    opacity: 0;
    transform: scaleY(1);
  }
  2%,
  100% {
    opacity: 1;
  }
  100% {
    transform: scaleY(8);
  }
}
@keyframes rainbow {
  0% {
    opacity: 0;
    transform: scaleY(1);
  }
  2%,
  100% {
    opacity: 1;
  }
  100% {
    transform: scaleY(8);
  }
}
@-moz-keyframes twinkle {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  20% {
    opacity: 1;
    transform: scale(1);
  }
  40%,
  100% {
    opacity: 0;
    transform: scale(0);
  }
}
@-webkit-keyframes twinkle {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  20% {
    opacity: 1;
    transform: scale(1);
  }
  40%,
  100% {
    opacity: 0;
    transform: scale(0);
  }
}
@-o-keyframes twinkle {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  20% {
    opacity: 1;
    transform: scale(1);
  }
  40%,
  100% {
    opacity: 0;
    transform: scale(0);
  }
}
@keyframes twinkle {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  20% {
    opacity: 1;
    transform: scale(1);
  }
  40%,
  100% {
    opacity: 0;
    transform: scale(0);
  }
}
@-moz-keyframes hello {
  0%,
  33% {
    fill: #ff5f5f;
  }
  33.1%,
  66% {
    fill: #fabb19;
  }
  66.1%,
  100% {
    fill: #00ced4;
  }
}
@-webkit-keyframes hello {
  0%,
  33% {
    fill: #ff5f5f;
  }
  33.1%,
  66% {
    fill: #fabb19;
  }
  66.1%,
  100% {
    fill: #00ced4;
  }
}
@-o-keyframes hello {
  0%,
  33% {
    fill: #ff5f5f;
  }
  33.1%,
  66% {
    fill: #fabb19;
  }
  66.1%,
  100% {
    fill: #00ced4;
  }
}
@keyframes hello {
  0%,
  33% {
    fill: #ff5f5f;
  }
  33.1%,
  66% {
    fill: #fabb19;
  }
  66.1%,
  100% {
    fill: #00ced4;
  }
}
.projects {
  display: flex;
  flex-wrap: wrap;
  background-color: var(--border-color);
  gap: var(--border-width);
}
.project {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  container-type: inline-size;
  background-color: var(--bg-color);
  background-image: var(--bg-grain);
  background-size: 350px auto;
  --svg-height: 330px;
}
@media screen and (max-width: 610px) {
  .project {
    flex-basis: 100%;
  }
  .project:has(.mushroom:not(.gu-transit)) .svg {
    height: calc(var(--svg-height) * 1.3);
  }
  .project:has(.mushroom:not(.gu-transit)) .svg svg {
    transform-origin: center center;
    transform: scale(1.3);
  }
  .project:has(.mushroom ~ .mushroom:not(.gu-transit)) .svg {
    height: calc(var(--svg-height) * 1.6);
  }
  .project:has(.mushroom ~ .mushroom:not(.gu-transit)) .svg svg {
    transform: scale(1.6);
  }
}
@media screen and (min-width: 611px) {
  .project {
    flex-basis: calc((100% - 1px) / 2);
  }
}
@media screen and (min-width: 951px) {
  .project {
    flex-basis: calc((100% - 2px) / 3);
  }
}
.project h2,
.project p,
.project a {
  margin: 0;
  padding: 1rem;
}
.project h2 {
  padding-bottom: 0;
  font-size: var(--font-base);
}
.project a {
  border-top: var(--border-width) solid var(--grid-color);
  text-align: center;
}
.project .svg {
  height: var(--svg-height);
  background-color: var(--svg-bg);
  display: grid;
  justify-items: center;
  align-items: center;
}
.project .svg svg {
  padding: 0;
  display: block;
  height: var(--svg-height);
  width: auto;
}
.project:has(.mushroom:not(.gu-transit)) {
  flex-basis: calc(((100% - 1px) / 3) * 2);
}
.project:has(.mushroom ~ .mushroom:not(.gu-transit)) {
  flex-basis: 100%;
}
.project:nth-child(5n + 1):has(.potion:not(.gu-transit)) .svg {
  --svg-bg: #5d73a3;
}
.project:nth-child(5n + 1):has(.potion:not(.gu-transit)) .draggable {
  --draggable-dot: #00ced4;
}
.project:nth-child(5n + 1):has(.potion ~ .potion:not(.gu-transit)) .svg {
  --svg-bg: #ff5f5f;
}
.project:nth-child(5n + 1):has(.potion ~ .potion:not(.gu-transit)) .draggable {
  --draggable-dot: #fabb19;
}
.project:nth-child(5n + 2):has(.potion:not(.gu-transit)) .svg {
  --svg-bg: #fabb19;
}
.project:nth-child(5n + 2):has(.potion:not(.gu-transit)) .draggable {
  --draggable-dot: #ff5f5f;
}
.project:nth-child(5n + 2):has(.potion ~ .potion:not(.gu-transit)) .svg {
  --svg-bg: #00ced4;
}
.project:nth-child(5n + 2):has(.potion ~ .potion:not(.gu-transit)) .draggable {
  --draggable-dot: #5d73a3;
}
.project:nth-child(5n + 3):has(.potion:not(.gu-transit)) .svg {
  --svg-bg: #ffb39b;
}
.project:nth-child(5n + 3):has(.potion:not(.gu-transit)) .draggable {
  --draggable-dot: #ff5f5f;
}
.project:nth-child(5n + 3):has(.potion ~ .potion:not(.gu-transit)) .svg {
  --svg-bg: #5d73a3;
}
.project:nth-child(5n + 3):has(.potion ~ .potion:not(.gu-transit)) .draggable {
  --draggable-dot: #00ced4;
}
.project:nth-child(5n + 4):has(.potion:not(.gu-transit)) .svg {
  --svg-bg: #00ced4;
}
.project:nth-child(5n + 4):has(.potion:not(.gu-transit)) .draggable {
  --draggable-dot: #5d73a3;
}
.project:nth-child(5n + 4):has(.potion ~ .potion:not(.gu-transit)) .svg {
  --svg-bg: #fabb19;
}
.project:nth-child(5n + 4):has(.potion ~ .potion:not(.gu-transit)) .draggable {
  --draggable-dot: #ff5f5f;
}
.project:nth-child(5n + 5):has(.potion:not(.gu-transit)) .svg {
  --svg-bg: #ff5f5f;
}
.project:nth-child(5n + 5):has(.potion:not(.gu-transit)) .draggable {
  --draggable-dot: #fabb19;
}
.project:nth-child(5n + 5):has(.potion ~ .potion:not(.gu-transit)) .svg {
  --svg-bg: #ffb39b;
}
.project:nth-child(5n + 5):has(.potion ~ .potion:not(.gu-transit)) .draggable {
  --draggable-dot: #5d73a3;
}
.project:has(.potion:not(.gu-transit)) .fill-swap > * {
  fill: var(--fill-swap-bg);
}
.project:has(.potion:not(.gu-transit)) .fill-swap > text {
  fill: var(--fill-swap-text);
}
.project.david-rose:has(.potion:not(.gu-transit)) .skin path {
  fill: #ffb39b;
}
.project.hollywood-age-gap:has(.potion ~ .potion:not(.gu-transit)) .logo path {
  fill: white;
}
.project.airport-codes:has(.potion:not(.gu-transit)) {
  --fill-swap-bg: #5d73a3;
  --fill-swap-text: white;
}
.project.airport-codes:has(.potion ~ .potion:not(.gu-transit)) {
  --fill-swap-bg: #ffb39b;
  --fill-swap-text: #14303f;
}
.project.top-chef:has(.potion:not(.gu-transit)) {
  --fill-swap-bg: #ff5f5f;
}
.project.top-chef:has(.potion ~ .potion:not(.gu-transit)) {
  --fill-swap-bg: #5d73a3;
}
.project.whyaz:has(.potion:not(.gu-transit)) {
  --fill-swap-bg: #fabb19;
}
.project.whyaz:has(.potion ~ .potion:not(.gu-transit)) {
  --fill-swap-bg: #00ced4;
}
.project.manual:has(.potion:not(.gu-transit)) #manual-details {
  opacity: 1;
}
.project.us-flags:has(.potion:not(.gu-transit)) [class^="dashed"] {
  opacity: 0;
}
.project.asinglediv:has(.potion:not(.gu-transit)) {
  --fill-swap-bg: #fabb19;
}
.project.asinglediv:has(.potion ~ .potion:not(.gu-transit)) {
  --fill-swap-bg: #ff5f5f;
}
.project .reveal {
  transition: opacity 200ms ease-in-out;
  opacity: 0;
}
.project .default {
  opacity: 1;
}
@container (min-width: 470px) {
  .david-rose [id^="david3"],
  .david-rose [id^="david5"] {
    opacity: 1;
  }
}
@container (min-width: 610px) {
  .airport-codes #tag2,
  .airport-codes #tag4,
  .top-chef #coat2,
  .top-chef #coat4,
  .whyaz #cactus1 {
    opacity: 1;
  }
  .svg .simple {
    transform-box: fill-box;
    transform-origin: center center;
    transform: scale(1.25);
  }
  .logo {
    transform-origin: center center;
    transform: scale(1.5);
  }
  .food-place #yogurt {
    transform-box: fill-box;
    transform-origin: center center;
    transform: scale(1.25);
  }
  .asinglediv [class*="canvas-text"] {
    transform-box: fill-box;
    transform-origin: left bottom;
    transform: scale(1.3);
  }
  .cabinet #cabinet2,
  .cabinet #cabinet4 {
    opacity: 1;
  }
}
@container (min-width: 750px) {
  .david-rose [id^="david2"],
  .david-rose [id^="david6"] {
    opacity: 1;
  }
  .us-flags #flag2,
  .us-flags #flag4 {
    opacity: 1;
  }
}
@container (min-width: 1000px) {
  .airport-codes #tag1,
  .airport-codes #tag5,
  .top-chef #coat1,
  .top-chef #coat5 {
    opacity: 1;
  }
  .logo {
    transform: scale(2);
  }
  .svg .simple {
    transform-box: fill-box;
    transform-origin: center center;
    transform: scale(1.5);
  }
  .manual .simple {
    transform: scale(1.9, 1.5) rotate(90deg);
  }
  .whyaz #cactus2 {
    opacity: 1;
  }
  .whyaz #flag {
    transform-origin: center center;
    transform: scale(1.4);
  }
  .whyaz .cactus-left {
    transform: translateX(-0.5em);
  }
  .whyaz .cactus-right {
    transform: translateX(0.5em);
  }
  .food-place .reveal {
    opacity: 1;
  }
  .asinglediv [class*="canvas-text"] {
    transform: scale(2.3);
  }
  .cabinet #cabinet1,
  .cabinet #cabinet5 {
    opacity: 1;
  }
}
@container (min-width: 1100px) {
  .david-rose [id^="david1"],
  .david-rose [id^="david"] {
    opacity: 1;
  }
  .us-flags #flag1,
  .us-flags #flag5 {
    opacity: 1;
  }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-user-color-scheme]) .project .logo path {
    fill: white;
  }
  :root:not([data-user-color-scheme]) .project .dashed-lines * {
    stroke: white;
  }
  :root:not([data-user-color-scheme]) .project .food-place-text * {
    fill: white;
  }
  :root:not([data-user-color-scheme]) .project .off-canvas-text path {
    fill: #b5bac6;
  }
  :root:not([data-user-color-scheme]) .project .canvas-shadow polygon {
    fill: white;
  }
  :root:not([data-user-color-scheme])
    .project:has(.potion:not(.gu-transit))
    .logo
    path,
  :root:not([data-user-color-scheme])
    .project:has(.potion:not(.gu-transit))
    .food-place-text
    *,
  :root:not([data-user-color-scheme])
    .project:has(.potion:not(.gu-transit))
    .off-canvas-text
    path {
    fill: #14303f;
  }
  :root:not([data-user-color-scheme])
    .project:has(.potion:not(.gu-transit))
    .canvas-shadow
    polygon {
    fill: #14303f;
  }
}
[data-user-color-scheme="dark"] .project .logo path {
  fill: white;
}
[data-user-color-scheme="dark"] .project .dashed-lines * {
  stroke: white;
}
[data-user-color-scheme="dark"] .project .food-place-text * {
  fill: white;
}
[data-user-color-scheme="dark"] .project .off-canvas-text path {
  fill: #b5bac6;
}
[data-user-color-scheme="dark"] .project .canvas-shadow polygon {
  fill: white;
}
[data-user-color-scheme="dark"]
  .project:has(.potion:not(.gu-transit))
  .logo
  path,
[data-user-color-scheme="dark"]
  .project:has(.potion:not(.gu-transit))
  .food-place-text
  *,
[data-user-color-scheme="dark"]
  .project:has(.potion:not(.gu-transit))
  .off-canvas-text
  path {
  fill: #14303f;
}
[data-user-color-scheme="dark"]
  .project:has(.potion:not(.gu-transit))
  .canvas-shadow
  polygon {
  fill: #14303f;
}
@media screen and (min-width: 701px) {
  .about main {
    grid-template-columns: 2fr 1fr 1fr;
  }
  .about main .avatar {
    grid-column: 1/-1;
  }
}
.about .bio {
  display: grid;
  gap: var(--border-width);
  background-color: var(--border-color);
}
.about .bio > * {
  background-color: var(--bg-color);
  background-image: var(--bg-grain);
  background-size: 350px auto;
}
.about .content,
.about .links {
  padding: var(--body-padding);
}
.about .links h2 {
  font-size: var(--font-lg);
}
.about .links li {
  font-size: var(--font-sm);
}
.about .links li:not(:last-child) {
  margin-bottom: 1.2em;
}
.about .links a {
  text-decoration: none;
  font-weight: 520;
  font-size: var(--font-base);
}
.about .links a:hover {
  text-decoration: underline;
  text-decoration-color: var(--text-decoration);
  text-decoration-thickness: var(--border-width);
  text-underline-offset: 2px;
}
.about .links small {
  margin-top: 0.2em;
  display: block;
}
.about .coffee {
  margin-left: 2px;
  padding: 6px 0 6px 26px;
  background-repeat: no-repeat;
  background-position: left center;
  background-image: url("/assets/images/archive/2022/coffee.svg");
  background-size: 20px 30px;
}
.about .avatar {
  --shadow-color: #5d73a3;
  --skin-color: #b5bac6;
  padding: 10px;
  overflow: hidden;
  height: 320px;
  display: grid;
  justify-content: center;
  align-content: center;
}
.about .avatar .svg [class^="stroke"] path {
  vector-effect: none;
}
.about .avatar svg {
  height: 440px;
  display: block;
}
.about .avatar g {
  transform-box: fill-box;
  transform-origin: center top;
}
.about .avatar .skin path {
  fill: var(--skin-color);
}
.about .avatar .shadow path {
  fill: var(--shadow-color);
}
.about .avatar [id^="leaves"] path {
  transform-box: fill-box;
  transform-origin: center center;
}
.about .avatar:has(.mushroom:not(.gu-transit)) #head,
.about .avatar:has(.mushroom:not(.gu-transit)) img,
.about .avatar:has(.mushroom:not(.gu-transit)) #lynn-shadow {
  height: 340px;
}
.about .avatar:has(.mushroom:not(.gu-transit)) [class^="stroke"] path {
  stroke-width: 0.6;
}
.about .avatar:has(.mushroom ~ .mushroom:not(.gu-transit)) #head,
.about .avatar:has(.mushroom ~ .mushroom:not(.gu-transit)) img,
.about .avatar:has(.mushroom ~ .mushroom:not(.gu-transit)) #lynn-shadow {
  height: 360px;
}
.about
  .avatar:has(.mushroom ~ .mushroom:not(.gu-transit))
  [class^="stroke"]
  path {
  stroke-width: 0.5;
}
.about .avatar:has(.potion:not(.gu-transit)) {
  background-color: #5d73a3;
  background-image: url("/assets/images/archive/2022/about-pattern.svg");
  background-repeat: repeat;
  background-size: 200px 300px;
  background-position: center center;
  --skin-color: #ffb39b;
  --draggable-dot: #00ced4;
}
.about .avatar:has(.potion:not(.gu-transit)) #lynn-shadow {
  opacity: 1;
}
.about .avatar:has(.potion:not(.gu-transit)) #hoodie-fill path {
  fill: #ff5f5f;
}
.about .avatar:has(.potion ~ .potion:not(.gu-transit)) {
  background-color: #17875a;
  background-image: none;
}
.about .avatar:has(.potion ~ .potion:not(.gu-transit)) #leaves-bg,
.about .avatar:has(.potion ~ .potion:not(.gu-transit)) #leaves-sm {
  opacity: 1;
}
.about .avatar:has(.potion ~ .potion:not(.gu-transit)) #lynn-shadow {
  opacity: 0;
}
.about .avatar:has(.potion ~ .potion:not(.gu-transit)) #hoodie-fill path {
  fill: #fabb19;
}
.about
  .avatar:has(.mushroom:not(.gu-transit)):has(
    .potion ~ .potion:not(.gu-transit)
  )
  #leaves-sm1 {
  transform: translate(-3em, -4em);
}
.about
  .avatar:has(.mushroom:not(.gu-transit)):has(
    .potion ~ .potion:not(.gu-transit)
  )
  #leaves-sm2 {
  transform: translate(3em, -4em);
}
.about
  .avatar:has(.mushroom:not(.gu-transit)):has(
    .potion ~ .potion:not(.gu-transit)
  )
  #leaves-sm3 {
  transform: translate(-3.5em, 0);
}
.about
  .avatar:has(.mushroom:not(.gu-transit)):has(
    .potion ~ .potion:not(.gu-transit)
  )
  #leaves-sm4 {
  transform: translate(-3em, 0);
}
.about
  .avatar:has(.mushroom:not(.gu-transit)):has(
    .potion ~ .potion:not(.gu-transit)
  )
  #leaves-sm5 {
  transform: translate(3em, 0);
}
.about
  .avatar:has(.mushroom ~ .mushroom:not(.gu-transit)):has(
    .potion ~ .potion:not(.gu-transit)
  )
  #leaves-sm {
  opacity: 0;
}
.about
  .avatar:has(.mushroom ~ .mushroom:not(.gu-transit)):has(
    .potion ~ .potion:not(.gu-transit)
  )
  #leaves-lg {
  opacity: 1;
}
@media screen and (min-width: 951px) {
  .about .avatar {
    height: 420px;
  }
  .about .avatar:has(.mushroom:not(.gu-transit)) #head,
  .about .avatar:has(.mushroom:not(.gu-transit)) img,
  .about .avatar:has(.mushroom:not(.gu-transit)) #lynn-shadow {
    height: 440px;
  }
  .about .avatar:has(.mushroom ~ .mushroom:not(.gu-transit)) #head,
  .about .avatar:has(.mushroom ~ .mushroom:not(.gu-transit)) img,
  .about .avatar:has(.mushroom ~ .mushroom:not(.gu-transit)) #lynn-shadow {
    height: 460px;
  }
}
@media screen and (min-width: 701px) {
  .education main {
    grid-template-columns: 2fr 2fr;
  }
  .education main .avatar {
    grid-column: 1/-1;
  }
  .education .certifications {
    grid-row: 3/4;
    grid-column: 1/3;
  }
}
.education .bio {
  grid-column: 1/-1;
  display: grid;
  gap: var(--border-width);
  background-color: var(--border-color);
}
.education .bio > * {
  background-color: var(--bg-color);
  background-image: var(--bg-grain);
  background-size: 350px auto;
}
.education .content,
.education .links {
  padding: var(--body-padding);
}
.education .links h2 {
  font-size: var(--font-lg);
}
.education .links li {
  font-size: var(--font-base);
}
.education .links li:not(:last-child) {
  margin-bottom: 1.2em;
}
.education .links a {
  text-decoration: none;
  font-weight: 520;
}
.education .links a:hover {
  text-decoration: underline;
  text-decoration-color: var(--text-decoration);
  text-decoration-thickness: var(--border-width);
  text-underline-offset: 2px;
}
.education .links small {
  margin-top: 0.2em;
  display: block;
}
.education .coffee {
  margin-left: 2px;
  padding: 6px 0 6px 26px;
  background-repeat: no-repeat;
  background-position: left center;
  background-image: url("/assets/images/archive/2022/coffee.svg");
  background-size: 20px 30px;
}
.education .avatar {
  --shadow-color: #5d73a3;
  --skin-color: #b5bac6;
  padding: 10px;
  overflow: hidden;
  height: 320px;
  display: grid;
  justify-content: center;
  align-content: center;
}
.education .avatar .svg [class^="stroke"] path {
  vector-effect: none;
}
.education .avatar svg {
  height: 440px;
  display: block;
}
.education .avatar g {
  transform-box: fill-box;
  transform-origin: center top;
}
.education .avatar .skin path {
  fill: var(--skin-color);
}
.education .avatar .shadow path {
  fill: var(--shadow-color);
}
.education .avatar [id^="leaves"] path {
  transform-box: fill-box;
  transform-origin: center center;
}
.education .avatar:has(.mushroom:not(.gu-transit)) #head,
.education .avatar:has(.mushroom:not(.gu-transit)) img,
.education .avatar:has(.mushroom:not(.gu-transit)) #lynn-shadow {
  height: 340px;
}
.education .avatar:has(.mushroom:not(.gu-transit)) [class^="stroke"] path {
  stroke-width: 0.6;
}
.education .avatar:has(.mushroom ~ .mushroom:not(.gu-transit)) #head,
.education .avatar:has(.mushroom ~ .mushroom:not(.gu-transit)) img,
.education .avatar:has(.mushroom ~ .mushroom:not(.gu-transit)) #lynn-shadow {
  height: 360px;
}
.education
  .avatar:has(.mushroom ~ .mushroom:not(.gu-transit))
  [class^="stroke"]
  path {
  stroke-width: 0.5;
}
.education .avatar:has(.potion:not(.gu-transit)) {
  background-color: #5d73a3;
  background-image: url("/assets/images/archive/2022/education-pattern.svg");
  background-repeat: repeat;
  background-size: 200px 300px;
  background-position: center center;
  --skin-color: #ffb39b;
  --draggable-dot: #00ced4;
}
.education .avatar:has(.potion:not(.gu-transit)) #lynn-shadow {
  opacity: 1;
}
.education .avatar:has(.potion:not(.gu-transit)) #hoodie-fill path {
  fill: #ff5f5f;
}
.education .avatar:has(.potion ~ .potion:not(.gu-transit)) {
  background-color: #17875a;
  background-image: none;
}
.education .avatar:has(.potion ~ .potion:not(.gu-transit)) #leaves-bg,
.education .avatar:has(.potion ~ .potion:not(.gu-transit)) #leaves-sm {
  opacity: 1;
}
.education .avatar:has(.potion ~ .potion:not(.gu-transit)) #lynn-shadow {
  opacity: 0;
}
.education .avatar:has(.potion ~ .potion:not(.gu-transit)) #hoodie-fill path {
  fill: #fabb19;
}
.education
  .avatar:has(.mushroom:not(.gu-transit)):has(
    .potion ~ .potion:not(.gu-transit)
  )
  #leaves-sm1 {
  transform: translate(-3em, -4em);
}
.education
  .avatar:has(.mushroom:not(.gu-transit)):has(
    .potion ~ .potion:not(.gu-transit)
  )
  #leaves-sm2 {
  transform: translate(3em, -4em);
}
.education
  .avatar:has(.mushroom:not(.gu-transit)):has(
    .potion ~ .potion:not(.gu-transit)
  )
  #leaves-sm3 {
  transform: translate(-3.5em, 0);
}
.education
  .avatar:has(.mushroom:not(.gu-transit)):has(
    .potion ~ .potion:not(.gu-transit)
  )
  #leaves-sm4 {
  transform: translate(-3em, 0);
}
.education
  .avatar:has(.mushroom:not(.gu-transit)):has(
    .potion ~ .potion:not(.gu-transit)
  )
  #leaves-sm5 {
  transform: translate(3em, 0);
}
.education
  .avatar:has(.mushroom ~ .mushroom:not(.gu-transit)):has(
    .potion ~ .potion:not(.gu-transit)
  )
  #leaves-sm {
  opacity: 0;
}
.education
  .avatar:has(.mushroom ~ .mushroom:not(.gu-transit)):has(
    .potion ~ .potion:not(.gu-transit)
  )
  #leaves-lg {
  opacity: 1;
}
@media screen and (min-width: 701px) {
  .project-made main {
    grid-template-columns: 2fr 1fr 1fr;
  }
  .project-made main .avatar {
    grid-column: 1/-1;
  }
}
.project-made .bio {
  display: grid;
  gap: var(--border-width);
  background-color: var(--border-color);
}
.project-made main {
  background-color: none;
}
.project-made .bio > * {
  background-color: var(--bg-color);
  background-image: var(--bg-grain);
  background-size: 350px auto;
}
.project-made .content,
.project-made .links {
  padding: var(--body-padding);
}
.project-made .links h2 {
  font-size: var(--font-lg);
}
.project-made .links li {
  font-size: var(--font-sm);
}
.project-made .links li:not(:last-child) {
  margin-bottom: 1.2em;
}
.project-made .links a {
  text-decoration: none;
  font-weight: 520;
  font-size: var(--font-base);
}
.project-made .links a:hover {
  text-decoration: underline;
  text-decoration-color: var(--text-decoration);
  text-decoration-thickness: var(--border-width);
  text-underline-offset: 2px;
}
.project-made .links small {
  margin-top: 0.2em;
  display: block;
}
.project-made .coffee {
  margin-left: 2px;
  padding: 6px 0 6px 26px;
  background-repeat: no-repeat;
  background-position: left center;
  background-image: url("/assets/images/archive/2022/coffee.svg");
  background-size: 20px 30px;
}
.project-made .avatar {
  --shadow-color: #5d73a3;
  --skin-color: #b5bac6;
  padding: 10px;
  overflow: hidden;
  height: 320px;
  display: grid;
  justify-content: center;
  align-content: center;
}
.project-made .avatar .svg [class^="stroke"] path {
  vector-effect: none;
}
.project-made .avatar svg {
  height: 440px;
  display: block;
}
.project-made .avatar g {
  transform-box: fill-box;
  transform-origin: center top;
}
.project-made .avatar .skin path {
  fill: var(--skin-color);
}
.project-made .avatar .shadow path {
  fill: var(--shadow-color);
}
.project-made .avatar [id^="leaves"] path {
  transform-box: fill-box;
  transform-origin: center center;
}
.project-made .avatar:has(.mushroom:not(.gu-transit)) #head,
.project-made .avatar:has(.mushroom:not(.gu-transit)) img,
.project-made .avatar:has(.mushroom:not(.gu-transit)) #lynn-shadow {
  height: 340px;
}
.project-made .avatar:has(.mushroom:not(.gu-transit)) [class^="stroke"] path {
  stroke-width: 0.6;
}
.project-made .avatar:has(.mushroom ~ .mushroom:not(.gu-transit)) #head,
.project-made .avatar:has(.mushroom ~ .mushroom:not(.gu-transit)) img,
.project-made .avatar:has(.mushroom ~ .mushroom:not(.gu-transit)) #lynn-shadow {
  height: 360px;
}
.project-made
  .avatar:has(.mushroom ~ .mushroom:not(.gu-transit))
  [class^="stroke"]
  path {
  stroke-width: 0.5;
}
.project-made .avatar:has(.potion:not(.gu-transit)) {
  background-color: #5d73a3;
  background-image: url("/assets/images/archive/2022/about-pattern.svg");
  background-repeat: repeat;
  background-size: 200px 300px;
  background-position: center center;
  --skin-color: #ffb39b;
  --draggable-dot: #00ced4;
}
.project-made .avatar:has(.potion:not(.gu-transit)) #lynn-shadow {
  opacity: 1;
}
.project-made .avatar:has(.potion:not(.gu-transit)) #hoodie-fill path {
  fill: #ff5f5f;
}
.project-made .avatar:has(.potion ~ .potion:not(.gu-transit)) {
  background-color: #17875a;
  background-image: none;
}
.project-made .avatar:has(.potion ~ .potion:not(.gu-transit)) #leaves-bg,
.project-made .avatar:has(.potion ~ .potion:not(.gu-transit)) #leaves-sm {
  opacity: 1;
}
.project-made .avatar:has(.potion ~ .potion:not(.gu-transit)) #lynn-shadow {
  opacity: 0;
}
.project-made
  .avatar:has(.potion ~ .potion:not(.gu-transit))
  #hoodie-fill
  path {
  fill: #fabb19;
}
.project-made
  .avatar:has(.mushroom:not(.gu-transit)):has(
    .potion ~ .potion:not(.gu-transit)
  )
  #leaves-sm1 {
  transform: translate(-3em, -4em);
}
.project-made
  .avatar:has(.mushroom:not(.gu-transit)):has(
    .potion ~ .potion:not(.gu-transit)
  )
  #leaves-sm2 {
  transform: translate(3em, -4em);
}
.project-made
  .avatar:has(.mushroom:not(.gu-transit)):has(
    .potion ~ .potion:not(.gu-transit)
  )
  #leaves-sm3 {
  transform: translate(-3.5em, 0);
}
.project-made
  .avatar:has(.mushroom:not(.gu-transit)):has(
    .potion ~ .potion:not(.gu-transit)
  )
  #leaves-sm4 {
  transform: translate(-3em, 0);
}
.project-made
  .avatar:has(.mushroom:not(.gu-transit)):has(
    .potion ~ .potion:not(.gu-transit)
  )
  #leaves-sm5 {
  transform: translate(3em, 0);
}
.project-made
  .avatar:has(.mushroom ~ .mushroom:not(.gu-transit)):has(
    .potion ~ .potion:not(.gu-transit)
  )
  #leaves-sm {
  opacity: 0;
}
.project-made
  .avatar:has(.mushroom ~ .mushroom:not(.gu-transit)):has(
    .potion ~ .potion:not(.gu-transit)
  )
  #leaves-lg {
  opacity: 1;
}
.projects-made .main-nav .nav-art,
.projects-made.web .main-nav .nav-web {
  background-position: center calc(var(--nav-height) - 4px);
}
.projects-made .main-nav .nav-art:focus:focus-visible,
.projects-made.web .main-nav .nav-web:focus:focus-visible {
  background-image: none;
}
.projects-made h2 {
  font-size: 2rem;
  margin: 0;
}
.projects-made main {
  background-color: transparent;
}
.projects-made h2 a {
  background-position: center bottom -2px;
  text-decoration: none;
  line-height: 1;
}
.projects-made h2 a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  color: inherit;
}
.projects-made h2 a:focus-visible:hover {
  background-color: #fff;
  background-image: none;
  color: #333;
}
.projects-made .project-image {
  margin-bottom: 0.5em;
}
.projects-made a.project-image {
  display: block;
  background: 0 0;
  transition: box-shadow 150ms ease-in-out;
}
.projects-made a.project-image:focus {
  box-shadow: 0 0 0 5px #d95e47;
  background-color: #fff;
}
.projects-made a.project-image:hover {
  box-shadow: 0 0 0 5px var(--hover-shadow, #d95e47);
}
.projects-made a.project-image img,
.projects-made div.project-image,
.projects-made img.project-image {
  padding: 0.3em;
  border: 1px solid var(--border-color);
}
.projects-made .project img,
.projects-made .project-image {
  display: block;
  width: 100%;
}
.projects-made .project small {
  display: block;
}
.projects-made .projects-list {
  display: grid;
}
@media screen and (max-width: 500px) {
  .projects-made .projects-list {
    padding-bottom: 1.2em;
  }
}
@media screen and (min-width: 501px) {
  .projects-made .projects-list {
    padding-bottom: 2.5em;
  }
}
@media screen and (max-width: 750px) {
  .projects-made .projects-list {
    grid-gap: 1.5em;
  }
  .projects-made .projects-list .multi > div:not(:last-child) {
    margin-bottom: 0.5em;
  }
}
@media screen and (min-width: 751px) {
  .projects-made .projects-list {
    grid-template-columns: 1fr 1fr;
    grid-gap: 1.5em 2em;
  }
  .projects-made .projects-list .wide {
    grid-column: 1/-1;
  }
  .projects-made .projects-list .multi {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1em;

    :first-child {
      margin-top: 0px;
    }
    :last-child {
      margin-top: 0px;
    }
  }
}
@media screen and (min-width: 921px) {
  .projects-made .projects-list {
    grid-gap: 2em 2.5em;
  }
}
.projects-made.web .project {
  display: grid;
  grid-template-columns: 1fr 20px;
  grid-template-rows: auto;
  grid-gap: 10px;
  grid-template-areas: "image image" "title icon" "desc .";
  align-content: start;
}
.projects-made.web .project .project-image {
  grid-area: image;
}
.projects-made.web .project h2 {
  grid-area: title;
  align-self: center;
}
.projects-made.web .project .social {
  grid-area: icon;
  align-self: center;
}
.projects-made.web .project p:last-of-type {
  grid-area: desc;
  margin-bottom: 0;
}
@media screen and (min-width: 701px) {
  .thoughts main {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--border-width);
    background-color: var(--border-color);
  }
  .thoughts main::before {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    grid-column: 1;
    background-color: var(--bg-color);
    background-image: repeating-linear-gradient(
        to right,
        transparent,
        transparent 20px,
        var(--grid-color) 20px,
        var(--grid-color) 21px
      ),
      repeating-linear-gradient(
        to top,
        transparent,
        transparent 20px,
        var(--grid-color) 20px,
        var(--grid-color) 21px
      ),
      var(--bg-grain);
    background-size:
      100% 100%,
      100% 100%,
      350px auto;
  }
  .thoughts .thoughts-list {
    grid-column: 2/-1;
  }
}
.thoughts .thoughts-list {
  display: grid;
  gap: var(--body-padding);
  padding: calc(var(--body-padding) * 2) var(--body-padding);
  background-color: var(--bg-color);
  background-image: var(--bg-grain);
  background-size: 350px auto;
}
.thoughts .dateline {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: var(--font-xs);
  color: var(--green);
}
.thoughts .dateline:after {
  content: "";
  flex: 1;
  height: 1px;
  display: block;
  background-color: var(--grid-color);
}
.thoughts .thought {
  display: grid;
  grid-template-columns: auto auto;
  gap: 0.3em 0.6em;
  justify-content: start;
  align-items: center;
}
.thoughts .thought-title {
  font-weight: 550;
  line-height: 1.2;
}
.thoughts .date {
  font-size: var(--font-xs);
  grid-column: 1/-1;
}
.thoughts .external:not(:empty)::after {
  content: "↗";
  margin-left: 0.3em;
  display: inline-block;
}
.thought-detail .main-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0;
  background-color: var(--bg-color);
  background-image: var(--bg-grain);
  background-size: 350px auto;
}
.thought-detail .main-header h1 {
  max-width: 28ch;
  padding-bottom: 1rem;
}
.thought-detail .main-header .date {
  padding-top: 0;
  padding-bottom: 1.5rem;
}
.thought-detail .thoughts-nav {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--border-width);
  align-items: stretch;
  background-color: var(--border-color);
  line-height: 1.1;
}
.thought-detail .thoughts-nav a {
  text-decoration: none;
}
.thought-detail .thoughts-nav a:hover {
  text-decoration: underline;
  text-decoration-color: var(--text-decoration);
  text-decoration-thickness: var(--border-width);
  text-underline-offset: 2px;
}
.thought-detail .thoughts-nav > * {
  padding: var(--body-padding);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.2em;
  background-color: var(--bg-color);
  background-image: var(--bg-grain);
  background-size: 350px auto;
  font-size: var(--font-sm);
}
.thought-detail .thoughts-nav .earlier {
  grid-column: 3;
}
.thought-detail .thoughts-nav .back {
  grid-column: 2;
  text-align: center;
}
.thought-detail .thoughts-nav .later {
  grid-column: 1;
}
.thought-detail .content {
  padding: calc(var(--body-padding) * 2) var(--body-padding);
  line-height: 1.43;
}
@media screen and (min-width: 701px) {
  .thought-detail .content {
    display: grid;
    grid-template-columns:
      auto [full-start] minmax(0, 3rem) [main-start] minmax(0, 630px)
      [main-end] minmax(0, 3rem) [full-end] auto;
  }
  .thought-detail .content > * {
    grid-column: main;
  }
  .thought-detail .content .wide,
  .thought-detail .content pre {
    grid-column: full;
  }
}
.archive-list {
  display: grid;
  background-color: var(--border-color);
  gap: var(--border-width);
}
.archive-list li {
  background-color: var(--bg-color);
  background-image: var(--bg-grain);
  background-size: 350px auto;
}
.archive-list .blank-space {
  display: none;
}
@media screen and (min-width: 450px) and (max-width: 700px) {
  .archive-list {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (min-width: 701px) {
  .archive-list {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .archive-list .blank-space {
    grid-column: span 2;
    display: grid;
    place-content: center;
    background-color: var(--bg-color);
    background-image: repeating-linear-gradient(
        to right,
        transparent,
        transparent 20px,
        var(--grid-color) 20px,
        var(--grid-color) 21px
      ),
      repeating-linear-gradient(
        to top,
        transparent,
        transparent 20px,
        var(--grid-color) 20px,
        var(--grid-color) 21px
      ),
      var(--bg-grain);
    background-size:
      100% 100%,
      100% 100%,
      350px auto;
  }
}
.archive-list .archive-image {
  display: block;
  position: relative;
}
.archive-list .archive-image::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  box-shadow: inset 0 0 0 transparent;
  transition: box-shadow 150ms ease-in-out;
}
.archive-list .archive-image img {
  transition: transform 150ms ease-in-out;
}
.archive-list .archive-image:focus-visible {
  outline: none;
}
.archive-list .archive-image:focus-visible::after {
  box-shadow:
    inset 0 0 0 5px var(--focus-bg),
    inset 0 0 0 6px var(--focus-outline),
    0 0 0 1px var(--focus-outline);
}
.archive-list .archive-image:focus-visible img {
  transform: scale(0.98);
}
.archive-list .archive-image:hover::after {
  box-shadow:
    inset 0 0 0 5px var(--bg-color),
    inset 0 0 0 6px var(--border-color),
    0 1px 0 0 var(--border-color);
}
.archive-list .archive-image:hover img {
  transform: scale(0.98);
}
.archive-list a {
  text-decoration: none;
}
.archive-list a:hover {
  text-decoration: underline;
  text-decoration-color: var(--text-decoration);
  text-decoration-thickness: var(--border-width);
  text-underline-offset: 2px;
}
.archive-list .links {
  padding: calc(var(--body-padding) / 2);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.archive-list .study a {
  font-weight: 350;
}
.archive-list img,
.archive-list small {
  display: block;
}
.fourohfour main {
  --hero-404-height: 600px;
  width: 100%;
  height: var(--home-header-height);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: var(--bg-color);
  background-image: var(--bg-grain);
  background-size: 350px auto;
}
.fourohfour .svg {
  padding: 0;
  display: block;
}
.fourohfour svg {
  padding: 0;
  display: block;
  height: var(--home-header-height);
  width: auto;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-user-color-scheme]) .fourohfour .svg svg text {
    fill: #ffb39b;
  }
}
[data-user-color-scheme="dark"] .fourohfour .svg svg text {
  fill: #ffb39b;
}
.gifs {
  background-color: var(--bg-color);
  background-image: var(--bg-grain);
  background-size: 350px auto;
}
.gifs header {
  margin-bottom: 2em;
}
.gifs footer {
  margin-top: 6em;
}
.gifs header ~ .load-image,
.gifs header ~ p,
.gifs header ~ img,
.gifs header ~ pre {
  margin-bottom: 2em;
  margin-left: var(--body-padding);
  margin-right: var(--body-padding);
}
.gifs pre {
  max-width: 600px;
  margin-right: var(--body-padding);
  display: flex;
  gap: var(--body-padding);
  white-space: pre;
}
.gifs code {
  padding: 0.5em 1em;
  display: block;
  overflow: auto;
  background-color: var(--btn-bg);
  color: var(--text-color);
  border: var(--border-width) solid var(--border-color);
}
.gifs code::selection {
  background-color: var(--bg-color);
  background-image: var(--bg-grain);
  background-size: 350px auto;
  color: var(--text-color);
}
.gifs pre button {
  padding: 0.5em 1em;
  background-color: #fabb19;
  border: none;
  border-radius: 4px;
  color: #14303f;
  font-weight: 600;
  cursor: pointer;
  transition: box-shadow 150ms ease-in-out;
}
.gifs pre button:hover {
  background-color: #5d73a3;
  color: white;
}
.gifs pre button:active {
  transform: translateY(1px);
}
.gifs pre button:focus-visible {
  outline: none;
  box-shadow:
    inset 0 0 0 1px var(--focus-outline),
    inset 0 0 0 5px white,
    inset 0 0 0 6px var(--focus-outline);
}
.gifs .load-image,
.gifs img {
  display: block;
}
.gifs img {
  max-width: calc(100% - var(--body-padding) * 2);
}
.gifs .load-image {
  width: calc(100% - var(--body-padding) * 2);
  position: relative;
  background-size: contain;
  display: block;
  box-shadow: 0 0 0 transparent;
  transition: box-shadow 150ms ease-in-out;
}
.gifs .load-image:focus-visible {
  box-shadow:
    0 0 0 5px white,
    0 0 0 6px var(--focus-outline);
  outline: none;
}
.gifs .load-image:hover {
  box-shadow:
    0 0 0 5px var(--bg-color),
    0 0 0 6px var(--border-color);
}
.gifs .load-image::after {
  content: "click to preview gif";
  display: block;
  position: absolute;
  bottom: -2em;
  font-size: 80%;
  font-weight: 400;
  font-style: italic;
}

.container-project {
  width: 100%;
  max-width: 1260px;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 500px) {
  .container-project {
    padding-left: 1.2em;
    padding-right: 1.2em;
  }
}
@media screen and (min-width: 501px) {
  .container-project {
    padding-left: 2em;
    padding-right: 2em;
  }
}