:root {
  --lightBlueHS: 199, 33%;
  --yellowHS: 49, 100%;
  --redHS: 349, 100%;
  --lightGrayHS: 220, 2%;
  --yellowHSL: 49.1, 100%, 50%;
  --lightGrayHSL: 220, 2%, 66%;
  --lightBlueHSL: 199, 33%, 60.95%;
  --darkBlueHSL: 201, 42%, 35.2%;
  --orangeHSL: 22, 100%, 53.8%;
  --redHSL: 349, 100%, 45%;
  --midGrayHSL: 204, 2%, 54%;
  --darkGrayHSL: 210, 4%, 27%;
  --darkerGrayHSL: 349, 25%, 16%;
  --whiteHSL: 0, 0%, 99%;
  --trueWhiteHSL: 0, 0%, 100%;
  --blackHSL: 210, 33%, 9.5%;
  --trueBlackHSL: 0, 0%, 0%;
  --white: hsl(var(--whiteHSL));
  --trueWhite: hsl(var(--trueWhiteHSL));
  --black: hsl(var(--blackHSL));
  --trueBlack: hsl(var(--trueBlackHSL));
  --headingFont: "Averta-Std", -apple-system, system-ui, BlinkMacSystemFont,
  	"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bodyFont: "Alkes", Georgia, serif;
  --codeFont: "MonoLisa", Consolas, Monaco, "Andale Mono", "Ubuntu Mono",
  	monospace;
  --bodyFontWeight: normal;
  --bodyFontSize: 1.125rem;
  --bodyLineHeight: calc(var(--quarterNote) * 1.25);
  --yellow: hsl(var(--yellowHSL));
  --orange: hsl(var(--orangeHSL));
  --red: hsl(var(--redHSL));
  --lightestGray: hsl(var(--lightGrayHS), 94%);
  --lighterGray: hsl(var(--lightGrayHS), 86%);
  --lightGray: hsl(var(--lightGrayHSL));
  --midGray: hsl(var(--midGrayHSL));
  --darkGray: hsl(var(--darkGrayHSL));
  --darkerGray: hsl(var(--darkerGrayHSL));
  --lightBlue: hsl(var(--lightBlueHSL));
  --lighterBlue: hsl(var(--lightBlueHS), 90%);
  --lightestBlue: hsl(var(--lightBlueHS), 95%);
  --darkBlue: hsl(var(--darkBlueHSL));
  --darkerBlue: hsl(var(--darkBlueHSL), 20%);
  --darkGreen: hsl(180, 100%, 20%);
  --blueToYellow: #7ba7bc, #75b1bf, #66c6b6, #4fd27b, #56e035, #acef1b, #faf008,
  	#ffd100;
  --ink: var(--darkGray);
  --paper: var(--white);
  --paperHSL: var(--whiteHSL);
  --headingColor: var(--darkerGray);
  --accentColor: var(--darkBlue);
  --linkColor: var(--darkBlue);
  --highlightColor: var(--darkGray);
  --maxWidth: 34rem;
  --sidebarWidth: 15rem;
  --margin: var(--quarterNote);
  --sixteenthNote: calc(var(--quarterNote) / 4);
  --eighthNote: calc(var(--quarterNote) / 2);
  --quarterNote: 1.25rem;
  --dottedQuarterNote: calc(var(--quarterNote) * 1.5);
  --halfNote: calc(var(--quarterNote) * 2);
  --dottedHalfNote: calc(var(--quarterNote) * 3);
  --wholeNote: calc(var(--quarterNote) * 4);
  --tiedWholeNote: calc(var(--quarterNote) * 5);
  --dottedWholeNote: calc(var(--quarterNote) * 6);
  --buttonSize: 2.2rem;
  --buttonBackground: var(--paper);
  font-size: var(--bodyFontSize);
}
@media (min-width: 42rem) {
  :root {
    --bodyFontSize: 1.1875rem;
  }
}
@media (min-width: 82rem) {
  :root {
    --bodyFontSize: 1.25rem;
  }
}
@media (min-width: 42rem) {
  :root {
    --margin: var(--halfNote);
  }
}
@media (min-width: 56rem) {
  :root {
    --margin: var(--dottedHalfNote);
  }
}
@media (min-width: 108rem) {
  :root {
    --margin: var(--wholeNote);
  }
}
@media (min-width: 122rem) {
  :root {
    --margin: var(--dottedWholeNote);
  }
}
:root.dark {
  --paper: var(--black);
  --paperHSL: var(--blackHSL);
  --ink: var(--white);
  --headingColor: var(--white);
  --accentColor: var(--lightBlue);
  --linkColor: var(--lightBlue);
  --highlightColor: var(--darkerGray);
  --lighterGray: hsl(var(--lightGrayHS), 26%);
  --lightestGray: hsl(var(--lightGrayHS), 13%);
}
@media (prefers-color-scheme: dark) {
  :root:not(/* (unused) .light*/) {
    --paper: var(--black);
    --paperHSL: var(--blackHSL);
    --ink: var(--white);
    --headingColor: var(--white);
    --accentColor: var(--lightBlue);
    --linkColor: var(--lightBlue);
    --highlightColor: var(--darkerGray);
  }
}

#logo-svg.svelte-1u3m7wg {
  width: auto;
}
a:hover #logo-svg.svelte-1u3m7wg #bracket-left:where(.svelte-1u3m7wg), a:focus #logo-svg.svelte-1u3m7wg #bracket-left:where(.svelte-1u3m7wg) {
  transform: translateX(20%);
}
a:hover #logo-svg.svelte-1u3m7wg #bracket-right:where(.svelte-1u3m7wg), a:focus #logo-svg.svelte-1u3m7wg #bracket-right:where(.svelte-1u3m7wg) {
  transform: translateX(-20%);
}
#logo-svg.svelte-1u3m7wg #bracket-left:where(.svelte-1u3m7wg),
#logo-svg.svelte-1u3m7wg #bracket-right:where(.svelte-1u3m7wg) {
  transform: translateX(0);
  transition: transform 0.3s cubic-bezier(1, 0, 0, 1);
}
@media (max-width: 23rem) {
  #logo-svg.svelte-1u3m7wg #logo-text:where(.svelte-1u3m7wg) {
    display: none;
  }
}
#logo-svg.svelte-1u3m7wg #logo-text:where(.svelte-1u3m7wg) {
  font-family: "Berkshire Swash";
}:root {
  --lightBlueHS: 199, 33%;
  --yellowHS: 49, 100%;
  --redHS: 349, 100%;
  --lightGrayHS: 220, 2%;
  --yellowHSL: 49.1, 100%, 50%;
  --lightGrayHSL: 220, 2%, 66%;
  --lightBlueHSL: 199, 33%, 60.95%;
  --darkBlueHSL: 201, 42%, 35.2%;
  --orangeHSL: 22, 100%, 53.8%;
  --redHSL: 349, 100%, 45%;
  --midGrayHSL: 204, 2%, 54%;
  --darkGrayHSL: 210, 4%, 27%;
  --darkerGrayHSL: 349, 25%, 16%;
  --whiteHSL: 0, 0%, 99%;
  --trueWhiteHSL: 0, 0%, 100%;
  --blackHSL: 210, 33%, 9.5%;
  --trueBlackHSL: 0, 0%, 0%;
  --white: hsl(var(--whiteHSL));
  --trueWhite: hsl(var(--trueWhiteHSL));
  --black: hsl(var(--blackHSL));
  --trueBlack: hsl(var(--trueBlackHSL));
  --headingFont: "Averta-Std", -apple-system, system-ui, BlinkMacSystemFont,
  	"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bodyFont: "Alkes", Georgia, serif;
  --codeFont: "MonoLisa", Consolas, Monaco, "Andale Mono", "Ubuntu Mono",
  	monospace;
  --bodyFontWeight: normal;
  --bodyFontSize: 1.125rem;
  --bodyLineHeight: calc(var(--quarterNote) * 1.25);
  --yellow: hsl(var(--yellowHSL));
  --orange: hsl(var(--orangeHSL));
  --red: hsl(var(--redHSL));
  --lightestGray: hsl(var(--lightGrayHS), 94%);
  --lighterGray: hsl(var(--lightGrayHS), 86%);
  --lightGray: hsl(var(--lightGrayHSL));
  --midGray: hsl(var(--midGrayHSL));
  --darkGray: hsl(var(--darkGrayHSL));
  --darkerGray: hsl(var(--darkerGrayHSL));
  --lightBlue: hsl(var(--lightBlueHSL));
  --lighterBlue: hsl(var(--lightBlueHS), 90%);
  --lightestBlue: hsl(var(--lightBlueHS), 95%);
  --darkBlue: hsl(var(--darkBlueHSL));
  --darkerBlue: hsl(var(--darkBlueHSL), 20%);
  --darkGreen: hsl(180, 100%, 20%);
  --blueToYellow: #7ba7bc, #75b1bf, #66c6b6, #4fd27b, #56e035, #acef1b, #faf008,
  	#ffd100;
  --ink: var(--darkGray);
  --paper: var(--white);
  --paperHSL: var(--whiteHSL);
  --headingColor: var(--darkerGray);
  --accentColor: var(--darkBlue);
  --linkColor: var(--darkBlue);
  --highlightColor: var(--darkGray);
  --maxWidth: 34rem;
  --sidebarWidth: 15rem;
  --margin: var(--quarterNote);
  --sixteenthNote: calc(var(--quarterNote) / 4);
  --eighthNote: calc(var(--quarterNote) / 2);
  --quarterNote: 1.25rem;
  --dottedQuarterNote: calc(var(--quarterNote) * 1.5);
  --halfNote: calc(var(--quarterNote) * 2);
  --dottedHalfNote: calc(var(--quarterNote) * 3);
  --wholeNote: calc(var(--quarterNote) * 4);
  --tiedWholeNote: calc(var(--quarterNote) * 5);
  --dottedWholeNote: calc(var(--quarterNote) * 6);
  --buttonSize: 2.2rem;
  --buttonBackground: var(--paper);
  font-size: var(--bodyFontSize);
}
@media (min-width: 42rem) {
  :root {
    --bodyFontSize: 1.1875rem;
  }
}
@media (min-width: 82rem) {
  :root {
    --bodyFontSize: 1.25rem;
  }
}
@media (min-width: 42rem) {
  :root {
    --margin: var(--halfNote);
  }
}
@media (min-width: 56rem) {
  :root {
    --margin: var(--dottedHalfNote);
  }
}
@media (min-width: 108rem) {
  :root {
    --margin: var(--wholeNote);
  }
}
@media (min-width: 122rem) {
  :root {
    --margin: var(--dottedWholeNote);
  }
}
:root.dark {
  --paper: var(--black);
  --paperHSL: var(--blackHSL);
  --ink: var(--white);
  --headingColor: var(--white);
  --accentColor: var(--lightBlue);
  --linkColor: var(--lightBlue);
  --highlightColor: var(--darkerGray);
  --lighterGray: hsl(var(--lightGrayHS), 26%);
  --lightestGray: hsl(var(--lightGrayHS), 13%);
}
@media (prefers-color-scheme: dark) {
  :root:not(/* (unused) .light*/) {
    --paper: var(--black);
    --paperHSL: var(--blackHSL);
    --ink: var(--white);
    --headingColor: var(--white);
    --accentColor: var(--lightBlue);
    --linkColor: var(--lightBlue);
    --highlightColor: var(--darkerGray);
  }
}

.nav__item.svelte-wetpmo {
  margin: 0 0 0 1.5em;
}
@media (max-width: 56rem) {
  .nav__item.svelte-wetpmo {
    --itemTransition: 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
    opacity: 0;
    margin-bottom: 1.5rem;
    font-size: 1.25rem;
    line-height: 1.5em;
    color: var(--white);
    width: 100%;
  }
  @keyframes svelte-wetpmo-move_in_left {
    from {
      opacity: 0;
      transform: translateX(-3em);
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }
}
.nav__item.open.svelte-wetpmo {
  animation: svelte-wetpmo-move_in_left var(--itemTransition);
}
.nav__item.open.no-motion.svelte-wetpmo {
  animation: none;
  opacity: 1;
}
.nav__item.open.svelte-wetpmo:nth-of-type(1) {
  animation-delay: 0.1s;
}
.nav__item.open.svelte-wetpmo:nth-of-type(2) {
  animation-delay: 0.2s;
}
.nav__item.open.svelte-wetpmo:nth-of-type(3) {
  animation-delay: 0.3s;
}
.nav__item.open.svelte-wetpmo:nth-of-type(4) {
  animation-delay: 0.4s;
}
.nav__item.open.svelte-wetpmo:nth-of-type(5) {
  animation-delay: 0.5s;
}
.nav__item.open.svelte-wetpmo:nth-of-type(6) {
  animation-delay: 0.6s;
}
.nav__item.open.svelte-wetpmo:nth-of-type(7) {
  animation-delay: 0.7s;
}
.nav__item.open.svelte-wetpmo:nth-of-type(8) {
  animation-delay: 0.8s;
}
.nav__item.open.svelte-wetpmo:nth-of-type(9) {
  animation-delay: 0.9s;
}
.nav__item.open.svelte-wetpmo a:where(.svelte-wetpmo) {
  color: var(--white);
}
.nav__item.svelte-wetpmo a:where(.svelte-wetpmo) {
  color: var(--ink);
  display: block;
  display: inline-block;
  font-weight: normal;
  text-decoration: none;
  margin: 0;
  position: relative;
  color: var(--ink);
  width: -moz-max-content;
  width: max-content;
}
.nav__item.svelte-wetpmo a.active:where(.svelte-wetpmo) {
  font-weight: bold;
}
.nav__item.svelte-wetpmo a.active:where(.svelte-wetpmo) span:where(.svelte-wetpmo):after {
  transform: scaleX(1);
}
.nav__item.svelte-wetpmo a:where(.svelte-wetpmo) span:where(.svelte-wetpmo) {
  display: inline-block;
}
.nav__item.svelte-wetpmo a:where(.svelte-wetpmo) span:where(.svelte-wetpmo):after {
  position: absolute;
  bottom: 0;
  left: 0;
  content: "";
  transform: scaleX(0);
  display: block;
  width: 100%;
  height: 0.1em;
  background: var(--yellow);
  transition: transform 0.1s cubic-bezier(0.5, 0, 0.5, 1);
  transform-origin: right;
}
.nav__item.svelte-wetpmo a:where(.svelte-wetpmo):hover span:where(.svelte-wetpmo):after, .nav__item.svelte-wetpmo a:where(.svelte-wetpmo):focus span:where(.svelte-wetpmo):after {
  transform: scaleX(1);
  transform-origin: left;
}
@media (min-width: 42rem) {
  .nav__item.mobile-only.svelte-wetpmo {
    display: none;
  }
}

.reduce-motion .nav__item.open {
  animation: none;
  opacity: 1;
}

.reduce-motion .nav__item a span::after {
  transition: none !important;
}:root {
  --lightBlueHS: 199, 33%;
  --yellowHS: 49, 100%;
  --redHS: 349, 100%;
  --lightGrayHS: 220, 2%;
  --yellowHSL: 49.1, 100%, 50%;
  --lightGrayHSL: 220, 2%, 66%;
  --lightBlueHSL: 199, 33%, 60.95%;
  --darkBlueHSL: 201, 42%, 35.2%;
  --orangeHSL: 22, 100%, 53.8%;
  --redHSL: 349, 100%, 45%;
  --midGrayHSL: 204, 2%, 54%;
  --darkGrayHSL: 210, 4%, 27%;
  --darkerGrayHSL: 349, 25%, 16%;
  --whiteHSL: 0, 0%, 99%;
  --trueWhiteHSL: 0, 0%, 100%;
  --blackHSL: 210, 33%, 9.5%;
  --trueBlackHSL: 0, 0%, 0%;
  --white: hsl(var(--whiteHSL));
  --trueWhite: hsl(var(--trueWhiteHSL));
  --black: hsl(var(--blackHSL));
  --trueBlack: hsl(var(--trueBlackHSL));
  --headingFont: "Averta-Std", -apple-system, system-ui, BlinkMacSystemFont,
  	"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bodyFont: "Alkes", Georgia, serif;
  --codeFont: "MonoLisa", Consolas, Monaco, "Andale Mono", "Ubuntu Mono",
  	monospace;
  --bodyFontWeight: normal;
  --bodyFontSize: 1.125rem;
  --bodyLineHeight: calc(var(--quarterNote) * 1.25);
  --yellow: hsl(var(--yellowHSL));
  --orange: hsl(var(--orangeHSL));
  --red: hsl(var(--redHSL));
  --lightestGray: hsl(var(--lightGrayHS), 94%);
  --lighterGray: hsl(var(--lightGrayHS), 86%);
  --lightGray: hsl(var(--lightGrayHSL));
  --midGray: hsl(var(--midGrayHSL));
  --darkGray: hsl(var(--darkGrayHSL));
  --darkerGray: hsl(var(--darkerGrayHSL));
  --lightBlue: hsl(var(--lightBlueHSL));
  --lighterBlue: hsl(var(--lightBlueHS), 90%);
  --lightestBlue: hsl(var(--lightBlueHS), 95%);
  --darkBlue: hsl(var(--darkBlueHSL));
  --darkerBlue: hsl(var(--darkBlueHSL), 20%);
  --darkGreen: hsl(180, 100%, 20%);
  --blueToYellow: #7ba7bc, #75b1bf, #66c6b6, #4fd27b, #56e035, #acef1b, #faf008,
  	#ffd100;
  --ink: var(--darkGray);
  --paper: var(--white);
  --paperHSL: var(--whiteHSL);
  --headingColor: var(--darkerGray);
  --accentColor: var(--darkBlue);
  --linkColor: var(--darkBlue);
  --highlightColor: var(--darkGray);
  --maxWidth: 34rem;
  --sidebarWidth: 15rem;
  --margin: var(--quarterNote);
  --sixteenthNote: calc(var(--quarterNote) / 4);
  --eighthNote: calc(var(--quarterNote) / 2);
  --quarterNote: 1.25rem;
  --dottedQuarterNote: calc(var(--quarterNote) * 1.5);
  --halfNote: calc(var(--quarterNote) * 2);
  --dottedHalfNote: calc(var(--quarterNote) * 3);
  --wholeNote: calc(var(--quarterNote) * 4);
  --tiedWholeNote: calc(var(--quarterNote) * 5);
  --dottedWholeNote: calc(var(--quarterNote) * 6);
  --buttonSize: 2.2rem;
  --buttonBackground: var(--paper);
  font-size: var(--bodyFontSize);
}
@media (min-width: 42rem) {
  :root {
    --bodyFontSize: 1.1875rem;
  }
}
@media (min-width: 82rem) {
  :root {
    --bodyFontSize: 1.25rem;
  }
}
@media (min-width: 42rem) {
  :root {
    --margin: var(--halfNote);
  }
}
@media (min-width: 56rem) {
  :root {
    --margin: var(--dottedHalfNote);
  }
}
@media (min-width: 108rem) {
  :root {
    --margin: var(--wholeNote);
  }
}
@media (min-width: 122rem) {
  :root {
    --margin: var(--dottedWholeNote);
  }
}
:root.dark {
  --paper: var(--black);
  --paperHSL: var(--blackHSL);
  --ink: var(--white);
  --headingColor: var(--white);
  --accentColor: var(--lightBlue);
  --linkColor: var(--lightBlue);
  --highlightColor: var(--darkerGray);
  --lighterGray: hsl(var(--lightGrayHS), 26%);
  --lightestGray: hsl(var(--lightGrayHS), 13%);
}
@media (prefers-color-scheme: dark) {
  :root:not(/* (unused) .light*/) {
    --paper: var(--black);
    --paperHSL: var(--blackHSL);
    --ink: var(--white);
    --headingColor: var(--white);
    --accentColor: var(--lightBlue);
    --linkColor: var(--lightBlue);
    --highlightColor: var(--darkerGray);
  }
}

ul.svelte-1hjp1kg {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  width: auto;
  font-size: 0.875rem;
  list-style-type: none;
  padding: 0;
}
@media (max-width: 56rem) {
  ul.svelte-1hjp1kg {
    list-style-type: none;
    text-align: left;
    width: 100%;
    display: none;
    margin: 0;
  }
  ul.open.svelte-1hjp1kg {
    display: block;
  }
}:root {
  --lightBlueHS: 199, 33%;
  --yellowHS: 49, 100%;
  --redHS: 349, 100%;
  --lightGrayHS: 220, 2%;
  --yellowHSL: 49.1, 100%, 50%;
  --lightGrayHSL: 220, 2%, 66%;
  --lightBlueHSL: 199, 33%, 60.95%;
  --darkBlueHSL: 201, 42%, 35.2%;
  --orangeHSL: 22, 100%, 53.8%;
  --redHSL: 349, 100%, 45%;
  --midGrayHSL: 204, 2%, 54%;
  --darkGrayHSL: 210, 4%, 27%;
  --darkerGrayHSL: 349, 25%, 16%;
  --whiteHSL: 0, 0%, 99%;
  --trueWhiteHSL: 0, 0%, 100%;
  --blackHSL: 210, 33%, 9.5%;
  --trueBlackHSL: 0, 0%, 0%;
  --white: hsl(var(--whiteHSL));
  --trueWhite: hsl(var(--trueWhiteHSL));
  --black: hsl(var(--blackHSL));
  --trueBlack: hsl(var(--trueBlackHSL));
  --headingFont: "Averta-Std", -apple-system, system-ui, BlinkMacSystemFont,
  	"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bodyFont: "Alkes", Georgia, serif;
  --codeFont: "MonoLisa", Consolas, Monaco, "Andale Mono", "Ubuntu Mono",
  	monospace;
  --bodyFontWeight: normal;
  --bodyFontSize: 1.125rem;
  --bodyLineHeight: calc(var(--quarterNote) * 1.25);
  --yellow: hsl(var(--yellowHSL));
  --orange: hsl(var(--orangeHSL));
  --red: hsl(var(--redHSL));
  --lightestGray: hsl(var(--lightGrayHS), 94%);
  --lighterGray: hsl(var(--lightGrayHS), 86%);
  --lightGray: hsl(var(--lightGrayHSL));
  --midGray: hsl(var(--midGrayHSL));
  --darkGray: hsl(var(--darkGrayHSL));
  --darkerGray: hsl(var(--darkerGrayHSL));
  --lightBlue: hsl(var(--lightBlueHSL));
  --lighterBlue: hsl(var(--lightBlueHS), 90%);
  --lightestBlue: hsl(var(--lightBlueHS), 95%);
  --darkBlue: hsl(var(--darkBlueHSL));
  --darkerBlue: hsl(var(--darkBlueHSL), 20%);
  --darkGreen: hsl(180, 100%, 20%);
  --blueToYellow: #7ba7bc, #75b1bf, #66c6b6, #4fd27b, #56e035, #acef1b, #faf008,
  	#ffd100;
  --ink: var(--darkGray);
  --paper: var(--white);
  --paperHSL: var(--whiteHSL);
  --headingColor: var(--darkerGray);
  --accentColor: var(--darkBlue);
  --linkColor: var(--darkBlue);
  --highlightColor: var(--darkGray);
  --maxWidth: 34rem;
  --sidebarWidth: 15rem;
  --margin: var(--quarterNote);
  --sixteenthNote: calc(var(--quarterNote) / 4);
  --eighthNote: calc(var(--quarterNote) / 2);
  --quarterNote: 1.25rem;
  --dottedQuarterNote: calc(var(--quarterNote) * 1.5);
  --halfNote: calc(var(--quarterNote) * 2);
  --dottedHalfNote: calc(var(--quarterNote) * 3);
  --wholeNote: calc(var(--quarterNote) * 4);
  --tiedWholeNote: calc(var(--quarterNote) * 5);
  --dottedWholeNote: calc(var(--quarterNote) * 6);
  --buttonSize: 2.2rem;
  --buttonBackground: var(--paper);
  font-size: var(--bodyFontSize);
}
@media (min-width: 42rem) {
  :root {
    --bodyFontSize: 1.1875rem;
  }
}
@media (min-width: 82rem) {
  :root {
    --bodyFontSize: 1.25rem;
  }
}
@media (min-width: 42rem) {
  :root {
    --margin: var(--halfNote);
  }
}
@media (min-width: 56rem) {
  :root {
    --margin: var(--dottedHalfNote);
  }
}
@media (min-width: 108rem) {
  :root {
    --margin: var(--wholeNote);
  }
}
@media (min-width: 122rem) {
  :root {
    --margin: var(--dottedWholeNote);
  }
}
:root.dark {
  --paper: var(--black);
  --paperHSL: var(--blackHSL);
  --ink: var(--white);
  --headingColor: var(--white);
  --accentColor: var(--lightBlue);
  --linkColor: var(--lightBlue);
  --highlightColor: var(--darkerGray);
  --lighterGray: hsl(var(--lightGrayHS), 26%);
  --lightestGray: hsl(var(--lightGrayHS), 13%);
}
@media (prefers-color-scheme: dark) {
  :root:not(/* (unused) .light*/) {
    --paper: var(--black);
    --paperHSL: var(--blackHSL);
    --ink: var(--white);
    --headingColor: var(--white);
    --accentColor: var(--lightBlue);
    --linkColor: var(--lightBlue);
    --highlightColor: var(--darkerGray);
  }
}

#hamburger.svelte-1n7sirh {
  display: none;
  justify-content: space-between;
  flex-direction: column;
  align-items: stretch;
  width: var(--buttonSize);
  height: var(--buttonSize);
  padding: 0.55rem;
  margin-left: 2rem;
  background: var(--buttonBackground);
  position: relative;
  z-index: 11;
  border: 2px solid var(--ink);
  border-radius: var(--buttonSize);
  overflow: visible;
  transition-delay: 0.15s;
}
#hamburger.svelte-1n7sirh:before {
  content: "";
  height: var(--buttonSize);
  width: 1px;
  background: var(--lightGray);
  display: block;
  position: absolute;
  top: -2px;
  left: -1.1rem;
  transition: inherit;
  transition-delay: 0.1s;
}
#hamburger.fixed.svelte-1n7sirh {
  position: relative;
  top: unset;
  right: unset;
  animation: none;
}
#hamburger.fixed.svelte-1n7sirh .line:where(.svelte-1n7sirh) {
  background: var(--white);
}
#hamburger.fixed.svelte-1n7sirh .line-top:where(.svelte-1n7sirh) {
  transform: translate(0.025em, -0.1em) rotate(-45deg) scaleX(1.5);
}
#hamburger.fixed.svelte-1n7sirh .line-middle:where(.svelte-1n7sirh) {
  transform: scaleX(0);
}
#hamburger.fixed.svelte-1n7sirh .line-bottom:where(.svelte-1n7sirh) {
  transform: translate(0.025em, 0.1em) rotate(45deg) scaleX(1.5);
}
#hamburger.svelte-1n7sirh .line:where(.svelte-1n7sirh) {
  width: 100%;
  height: 2px;
  background: var(--ink);
  transition: background 0.2s, transform 0.4s cubic-bezier(0.86, 0, 0.07, 1);
  transform-origin: right;
}
#hamburger.svelte-1n7sirh .line-middle:where(.svelte-1n7sirh) {
  transform-origin: center;
}
#hamburger.svelte-1n7sirh:hover .line:where(.svelte-1n7sirh), #hamburger.svelte-1n7sirh:focus .line:where(.svelte-1n7sirh) {
  background: var(--yellow);
}
@media (max-width: 56rem) {
  #hamburger.svelte-1n7sirh {
    display: flex;
  }
}:root {
  --lightBlueHS: 199, 33%;
  --yellowHS: 49, 100%;
  --redHS: 349, 100%;
  --lightGrayHS: 220, 2%;
  --yellowHSL: 49.1, 100%, 50%;
  --lightGrayHSL: 220, 2%, 66%;
  --lightBlueHSL: 199, 33%, 60.95%;
  --darkBlueHSL: 201, 42%, 35.2%;
  --orangeHSL: 22, 100%, 53.8%;
  --redHSL: 349, 100%, 45%;
  --midGrayHSL: 204, 2%, 54%;
  --darkGrayHSL: 210, 4%, 27%;
  --darkerGrayHSL: 349, 25%, 16%;
  --whiteHSL: 0, 0%, 99%;
  --trueWhiteHSL: 0, 0%, 100%;
  --blackHSL: 210, 33%, 9.5%;
  --trueBlackHSL: 0, 0%, 0%;
  --white: hsl(var(--whiteHSL));
  --trueWhite: hsl(var(--trueWhiteHSL));
  --black: hsl(var(--blackHSL));
  --trueBlack: hsl(var(--trueBlackHSL));
  --headingFont: "Averta-Std", -apple-system, system-ui, BlinkMacSystemFont,
  	"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bodyFont: "Alkes", Georgia, serif;
  --codeFont: "MonoLisa", Consolas, Monaco, "Andale Mono", "Ubuntu Mono",
  	monospace;
  --bodyFontWeight: normal;
  --bodyFontSize: 1.125rem;
  --bodyLineHeight: calc(var(--quarterNote) * 1.25);
  --yellow: hsl(var(--yellowHSL));
  --orange: hsl(var(--orangeHSL));
  --red: hsl(var(--redHSL));
  --lightestGray: hsl(var(--lightGrayHS), 94%);
  --lighterGray: hsl(var(--lightGrayHS), 86%);
  --lightGray: hsl(var(--lightGrayHSL));
  --midGray: hsl(var(--midGrayHSL));
  --darkGray: hsl(var(--darkGrayHSL));
  --darkerGray: hsl(var(--darkerGrayHSL));
  --lightBlue: hsl(var(--lightBlueHSL));
  --lighterBlue: hsl(var(--lightBlueHS), 90%);
  --lightestBlue: hsl(var(--lightBlueHS), 95%);
  --darkBlue: hsl(var(--darkBlueHSL));
  --darkerBlue: hsl(var(--darkBlueHSL), 20%);
  --darkGreen: hsl(180, 100%, 20%);
  --blueToYellow: #7ba7bc, #75b1bf, #66c6b6, #4fd27b, #56e035, #acef1b, #faf008,
  	#ffd100;
  --ink: var(--darkGray);
  --paper: var(--white);
  --paperHSL: var(--whiteHSL);
  --headingColor: var(--darkerGray);
  --accentColor: var(--darkBlue);
  --linkColor: var(--darkBlue);
  --highlightColor: var(--darkGray);
  --maxWidth: 34rem;
  --sidebarWidth: 15rem;
  --margin: var(--quarterNote);
  --sixteenthNote: calc(var(--quarterNote) / 4);
  --eighthNote: calc(var(--quarterNote) / 2);
  --quarterNote: 1.25rem;
  --dottedQuarterNote: calc(var(--quarterNote) * 1.5);
  --halfNote: calc(var(--quarterNote) * 2);
  --dottedHalfNote: calc(var(--quarterNote) * 3);
  --wholeNote: calc(var(--quarterNote) * 4);
  --tiedWholeNote: calc(var(--quarterNote) * 5);
  --dottedWholeNote: calc(var(--quarterNote) * 6);
  --buttonSize: 2.2rem;
  --buttonBackground: var(--paper);
  font-size: var(--bodyFontSize);
}
@media (min-width: 42rem) {
  :root {
    --bodyFontSize: 1.1875rem;
  }
}
@media (min-width: 82rem) {
  :root {
    --bodyFontSize: 1.25rem;
  }
}
@media (min-width: 42rem) {
  :root {
    --margin: var(--halfNote);
  }
}
@media (min-width: 56rem) {
  :root {
    --margin: var(--dottedHalfNote);
  }
}
@media (min-width: 108rem) {
  :root {
    --margin: var(--wholeNote);
  }
}
@media (min-width: 122rem) {
  :root {
    --margin: var(--dottedWholeNote);
  }
}
:root.dark {
  --paper: var(--black);
  --paperHSL: var(--blackHSL);
  --ink: var(--white);
  --headingColor: var(--white);
  --accentColor: var(--lightBlue);
  --linkColor: var(--lightBlue);
  --highlightColor: var(--darkerGray);
  --lighterGray: hsl(var(--lightGrayHS), 26%);
  --lightestGray: hsl(var(--lightGrayHS), 13%);
}
@media (prefers-color-scheme: dark) {
  :root:not(/* (unused) .light*/) {
    --paper: var(--black);
    --paperHSL: var(--blackHSL);
    --ink: var(--white);
    --headingColor: var(--white);
    --accentColor: var(--lightBlue);
    --linkColor: var(--lightBlue);
    --highlightColor: var(--darkerGray);
  }
}

.main-nav.svelte-1n2pdr0 {
  text-align: right;
  font-family: var(--headingFont);
}
@media (max-width: 56rem) {
  .main-nav.svelte-1n2pdr0 {
    display: block;
    position: fixed;
    transition: transform 0.4s cubic-bezier(1, 0, 0, 1), opacity 0.4s cubic-bezier(1, 0, 0, 1);
    transform: translateX(0);
    background: hsla(var(--blackHSL), 0.95);
    width: 100vw;
    height: 100vh;
    top: 0;
    left: -100vw;
    display: flex;
    flex-wrap: wrap;
    place-content: center;
    padding: 3rem;
    opacity: 0;
    z-index: 10;
  }
  .main-nav.open.svelte-1n2pdr0, .main-nav.svelte-1n2pdr0:focus-within {
    transform: translateX(100vw);
    opacity: 1;
  }
}
@media (min-width: 56rem) {
  .main-nav.svelte-1n2pdr0 {
    display: flex;
    justify-content: flex-end;
  }
}:root {
  --lightBlueHS: 199, 33%;
  --yellowHS: 49, 100%;
  --redHS: 349, 100%;
  --lightGrayHS: 220, 2%;
  --yellowHSL: 49.1, 100%, 50%;
  --lightGrayHSL: 220, 2%, 66%;
  --lightBlueHSL: 199, 33%, 60.95%;
  --darkBlueHSL: 201, 42%, 35.2%;
  --orangeHSL: 22, 100%, 53.8%;
  --redHSL: 349, 100%, 45%;
  --midGrayHSL: 204, 2%, 54%;
  --darkGrayHSL: 210, 4%, 27%;
  --darkerGrayHSL: 349, 25%, 16%;
  --whiteHSL: 0, 0%, 99%;
  --trueWhiteHSL: 0, 0%, 100%;
  --blackHSL: 210, 33%, 9.5%;
  --trueBlackHSL: 0, 0%, 0%;
  --white: hsl(var(--whiteHSL));
  --trueWhite: hsl(var(--trueWhiteHSL));
  --black: hsl(var(--blackHSL));
  --trueBlack: hsl(var(--trueBlackHSL));
  --headingFont: "Averta-Std", -apple-system, system-ui, BlinkMacSystemFont,
  	"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bodyFont: "Alkes", Georgia, serif;
  --codeFont: "MonoLisa", Consolas, Monaco, "Andale Mono", "Ubuntu Mono",
  	monospace;
  --bodyFontWeight: normal;
  --bodyFontSize: 1.125rem;
  --bodyLineHeight: calc(var(--quarterNote) * 1.25);
  --yellow: hsl(var(--yellowHSL));
  --orange: hsl(var(--orangeHSL));
  --red: hsl(var(--redHSL));
  --lightestGray: hsl(var(--lightGrayHS), 94%);
  --lighterGray: hsl(var(--lightGrayHS), 86%);
  --lightGray: hsl(var(--lightGrayHSL));
  --midGray: hsl(var(--midGrayHSL));
  --darkGray: hsl(var(--darkGrayHSL));
  --darkerGray: hsl(var(--darkerGrayHSL));
  --lightBlue: hsl(var(--lightBlueHSL));
  --lighterBlue: hsl(var(--lightBlueHS), 90%);
  --lightestBlue: hsl(var(--lightBlueHS), 95%);
  --darkBlue: hsl(var(--darkBlueHSL));
  --darkerBlue: hsl(var(--darkBlueHSL), 20%);
  --darkGreen: hsl(180, 100%, 20%);
  --blueToYellow: #7ba7bc, #75b1bf, #66c6b6, #4fd27b, #56e035, #acef1b, #faf008,
  	#ffd100;
  --ink: var(--darkGray);
  --paper: var(--white);
  --paperHSL: var(--whiteHSL);
  --headingColor: var(--darkerGray);
  --accentColor: var(--darkBlue);
  --linkColor: var(--darkBlue);
  --highlightColor: var(--darkGray);
  --maxWidth: 34rem;
  --sidebarWidth: 15rem;
  --margin: var(--quarterNote);
  --sixteenthNote: calc(var(--quarterNote) / 4);
  --eighthNote: calc(var(--quarterNote) / 2);
  --quarterNote: 1.25rem;
  --dottedQuarterNote: calc(var(--quarterNote) * 1.5);
  --halfNote: calc(var(--quarterNote) * 2);
  --dottedHalfNote: calc(var(--quarterNote) * 3);
  --wholeNote: calc(var(--quarterNote) * 4);
  --tiedWholeNote: calc(var(--quarterNote) * 5);
  --dottedWholeNote: calc(var(--quarterNote) * 6);
  --buttonSize: 2.2rem;
  --buttonBackground: var(--paper);
  font-size: var(--bodyFontSize);
}
@media (min-width: 42rem) {
  :root {
    --bodyFontSize: 1.1875rem;
  }
}
@media (min-width: 82rem) {
  :root {
    --bodyFontSize: 1.25rem;
  }
}
@media (min-width: 42rem) {
  :root {
    --margin: var(--halfNote);
  }
}
@media (min-width: 56rem) {
  :root {
    --margin: var(--dottedHalfNote);
  }
}
@media (min-width: 108rem) {
  :root {
    --margin: var(--wholeNote);
  }
}
@media (min-width: 122rem) {
  :root {
    --margin: var(--dottedWholeNote);
  }
}
:root.dark {
  --paper: var(--black);
  --paperHSL: var(--blackHSL);
  --ink: var(--white);
  --headingColor: var(--white);
  --accentColor: var(--lightBlue);
  --linkColor: var(--lightBlue);
  --highlightColor: var(--darkerGray);
  --lighterGray: hsl(var(--lightGrayHS), 26%);
  --lightestGray: hsl(var(--lightGrayHS), 13%);
}
@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --paper: var(--black);
    --paperHSL: var(--blackHSL);
    --ink: var(--white);
    --headingColor: var(--white);
    --accentColor: var(--lightBlue);
    --linkColor: var(--lightBlue);
    --highlightColor: var(--darkerGray);
  }
}

#dark-mode-toggle {
  background: var(--buttonBackground);
}
#dark-mode-toggle:hover svg path,
#dark-mode-toggle:hover svg circle,
#dark-mode-toggle:focus svg path,
#dark-mode-toggle:focus svg circle {
  stroke: var(--yellow);
}
#dark-mode-toggle.dark svg {
  transform: translateY(0);
}
#dark-mode-toggle svg {
  --itemTransition: 0.4s cubic-bezier(0.7, -0.01, 0, 1.01);
  width: 2rem;
  height: 4rem;
  transform: translateY(-1.975rem);
  transition: transform var(--itemTransition), fill var(--itemTransition), stroke var(--itemTransition), background var(--itemTransition);
}
#dark-mode-toggle svg path,
#dark-mode-toggle svg circle {
  transition: transform var(--itemTransition), fill var(--itemTransition), stroke var(--itemTransition), background var(--itemTransition);
  stroke: var(--ink);
}:root {
  --lightBlueHS: 199, 33%;
  --yellowHS: 49, 100%;
  --redHS: 349, 100%;
  --lightGrayHS: 220, 2%;
  --yellowHSL: 49.1, 100%, 50%;
  --lightGrayHSL: 220, 2%, 66%;
  --lightBlueHSL: 199, 33%, 60.95%;
  --darkBlueHSL: 201, 42%, 35.2%;
  --orangeHSL: 22, 100%, 53.8%;
  --redHSL: 349, 100%, 45%;
  --midGrayHSL: 204, 2%, 54%;
  --darkGrayHSL: 210, 4%, 27%;
  --darkerGrayHSL: 349, 25%, 16%;
  --whiteHSL: 0, 0%, 99%;
  --trueWhiteHSL: 0, 0%, 100%;
  --blackHSL: 210, 33%, 9.5%;
  --trueBlackHSL: 0, 0%, 0%;
  --white: hsl(var(--whiteHSL));
  --trueWhite: hsl(var(--trueWhiteHSL));
  --black: hsl(var(--blackHSL));
  --trueBlack: hsl(var(--trueBlackHSL));
  --headingFont: "Averta-Std", -apple-system, system-ui, BlinkMacSystemFont,
  	"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bodyFont: "Alkes", Georgia, serif;
  --codeFont: "MonoLisa", Consolas, Monaco, "Andale Mono", "Ubuntu Mono",
  	monospace;
  --bodyFontWeight: normal;
  --bodyFontSize: 1.125rem;
  --bodyLineHeight: calc(var(--quarterNote) * 1.25);
  --yellow: hsl(var(--yellowHSL));
  --orange: hsl(var(--orangeHSL));
  --red: hsl(var(--redHSL));
  --lightestGray: hsl(var(--lightGrayHS), 94%);
  --lighterGray: hsl(var(--lightGrayHS), 86%);
  --lightGray: hsl(var(--lightGrayHSL));
  --midGray: hsl(var(--midGrayHSL));
  --darkGray: hsl(var(--darkGrayHSL));
  --darkerGray: hsl(var(--darkerGrayHSL));
  --lightBlue: hsl(var(--lightBlueHSL));
  --lighterBlue: hsl(var(--lightBlueHS), 90%);
  --lightestBlue: hsl(var(--lightBlueHS), 95%);
  --darkBlue: hsl(var(--darkBlueHSL));
  --darkerBlue: hsl(var(--darkBlueHSL), 20%);
  --darkGreen: hsl(180, 100%, 20%);
  --blueToYellow: #7ba7bc, #75b1bf, #66c6b6, #4fd27b, #56e035, #acef1b, #faf008,
  	#ffd100;
  --ink: var(--darkGray);
  --paper: var(--white);
  --paperHSL: var(--whiteHSL);
  --headingColor: var(--darkerGray);
  --accentColor: var(--darkBlue);
  --linkColor: var(--darkBlue);
  --highlightColor: var(--darkGray);
  --maxWidth: 34rem;
  --sidebarWidth: 15rem;
  --margin: var(--quarterNote);
  --sixteenthNote: calc(var(--quarterNote) / 4);
  --eighthNote: calc(var(--quarterNote) / 2);
  --quarterNote: 1.25rem;
  --dottedQuarterNote: calc(var(--quarterNote) * 1.5);
  --halfNote: calc(var(--quarterNote) * 2);
  --dottedHalfNote: calc(var(--quarterNote) * 3);
  --wholeNote: calc(var(--quarterNote) * 4);
  --tiedWholeNote: calc(var(--quarterNote) * 5);
  --dottedWholeNote: calc(var(--quarterNote) * 6);
  --buttonSize: 2.2rem;
  --buttonBackground: var(--paper);
  font-size: var(--bodyFontSize);
}
@media (min-width: 42rem) {
  :root {
    --bodyFontSize: 1.1875rem;
  }
}
@media (min-width: 82rem) {
  :root {
    --bodyFontSize: 1.25rem;
  }
}
@media (min-width: 42rem) {
  :root {
    --margin: var(--halfNote);
  }
}
@media (min-width: 56rem) {
  :root {
    --margin: var(--dottedHalfNote);
  }
}
@media (min-width: 108rem) {
  :root {
    --margin: var(--wholeNote);
  }
}
@media (min-width: 122rem) {
  :root {
    --margin: var(--dottedWholeNote);
  }
}
:root.dark {
  --paper: var(--black);
  --paperHSL: var(--blackHSL);
  --ink: var(--white);
  --headingColor: var(--white);
  --accentColor: var(--lightBlue);
  --linkColor: var(--lightBlue);
  --highlightColor: var(--darkerGray);
  --lighterGray: hsl(var(--lightGrayHS), 26%);
  --lightestGray: hsl(var(--lightGrayHS), 13%);
}
@media (prefers-color-scheme: dark) {
  :root:not(/* (unused) .light*/) {
    --paper: var(--black);
    --paperHSL: var(--blackHSL);
    --ink: var(--white);
    --headingColor: var(--white);
    --accentColor: var(--lightBlue);
    --linkColor: var(--lightBlue);
    --highlightColor: var(--darkerGray);
  }
}

.logo.svelte-u2ldn {
  width: auto;
  height: 2rem;
  display: block;
}
@media (min-width: 108rem) and (min-height: 66rem) {
  .logo.svelte-u2ldn {
    height: 3rem;
  }
}

.icon-container.svelte-u2ldn {
  display: flex;
  align-items: center;
  position: fixed;
  right: 1rem;
  top: calc(1rem - 2px);
  transition: opacity 0.2s;
}
@media (min-width: 42rem) {
  .icon-container.svelte-u2ldn {
    position: static;
  }
}

.sticky.svelte-u2ldn {
  --ink: var(--white);
  --buttonBackground: transparent;
}

.header.svelte-u2ldn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  position: relative;
  z-index: 4;
  padding: var(--quarterNote) var(--margin) var(--halfNote);
}
@media (min-width: 42rem) {
  .header.svelte-u2ldn {
    padding: var(--halfNote) var(--margin);
  }
}

.skip-to-content-link.svelte-u2ldn {
  --itemTransition: 0.15s cubic-bezier(0.86, 0, 0.07, 1);
  transition: transform var(--itemTransition), opacity var(--itemTransition);
  position: absolute;
  top: -6rem;
  left: 1rem;
  padding: 0.5em;
  opacity: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 3rem;
  background: var(--darkBlue);
  color: var(--white);
  font-family: var(--headingFont);
}
.skip-to-content-link.svelte-u2ldn:focus {
  transform: translateY(7rem);
  opacity: 1;
  z-index: 11;
}:root {
  --lightBlueHS: 199, 33%;
  --yellowHS: 49, 100%;
  --redHS: 349, 100%;
  --lightGrayHS: 220, 2%;
  --yellowHSL: 49.1, 100%, 50%;
  --lightGrayHSL: 220, 2%, 66%;
  --lightBlueHSL: 199, 33%, 60.95%;
  --darkBlueHSL: 201, 42%, 35.2%;
  --orangeHSL: 22, 100%, 53.8%;
  --redHSL: 349, 100%, 45%;
  --midGrayHSL: 204, 2%, 54%;
  --darkGrayHSL: 210, 4%, 27%;
  --darkerGrayHSL: 349, 25%, 16%;
  --whiteHSL: 0, 0%, 99%;
  --trueWhiteHSL: 0, 0%, 100%;
  --blackHSL: 210, 33%, 9.5%;
  --trueBlackHSL: 0, 0%, 0%;
  --white: hsl(var(--whiteHSL));
  --trueWhite: hsl(var(--trueWhiteHSL));
  --black: hsl(var(--blackHSL));
  --trueBlack: hsl(var(--trueBlackHSL));
  --headingFont: "Averta-Std", -apple-system, system-ui, BlinkMacSystemFont,
  	"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bodyFont: "Alkes", Georgia, serif;
  --codeFont: "MonoLisa", Consolas, Monaco, "Andale Mono", "Ubuntu Mono",
  	monospace;
  --bodyFontWeight: normal;
  --bodyFontSize: 1.125rem;
  --bodyLineHeight: calc(var(--quarterNote) * 1.25);
  --yellow: hsl(var(--yellowHSL));
  --orange: hsl(var(--orangeHSL));
  --red: hsl(var(--redHSL));
  --lightestGray: hsl(var(--lightGrayHS), 94%);
  --lighterGray: hsl(var(--lightGrayHS), 86%);
  --lightGray: hsl(var(--lightGrayHSL));
  --midGray: hsl(var(--midGrayHSL));
  --darkGray: hsl(var(--darkGrayHSL));
  --darkerGray: hsl(var(--darkerGrayHSL));
  --lightBlue: hsl(var(--lightBlueHSL));
  --lighterBlue: hsl(var(--lightBlueHS), 90%);
  --lightestBlue: hsl(var(--lightBlueHS), 95%);
  --darkBlue: hsl(var(--darkBlueHSL));
  --darkerBlue: hsl(var(--darkBlueHSL), 20%);
  --darkGreen: hsl(180, 100%, 20%);
  --blueToYellow: #7ba7bc, #75b1bf, #66c6b6, #4fd27b, #56e035, #acef1b, #faf008,
  	#ffd100;
  --ink: var(--darkGray);
  --paper: var(--white);
  --paperHSL: var(--whiteHSL);
  --headingColor: var(--darkerGray);
  --accentColor: var(--darkBlue);
  --linkColor: var(--darkBlue);
  --highlightColor: var(--darkGray);
  --maxWidth: 34rem;
  --sidebarWidth: 15rem;
  --margin: var(--quarterNote);
  --sixteenthNote: calc(var(--quarterNote) / 4);
  --eighthNote: calc(var(--quarterNote) / 2);
  --quarterNote: 1.25rem;
  --dottedQuarterNote: calc(var(--quarterNote) * 1.5);
  --halfNote: calc(var(--quarterNote) * 2);
  --dottedHalfNote: calc(var(--quarterNote) * 3);
  --wholeNote: calc(var(--quarterNote) * 4);
  --tiedWholeNote: calc(var(--quarterNote) * 5);
  --dottedWholeNote: calc(var(--quarterNote) * 6);
  --buttonSize: 2.2rem;
  --buttonBackground: var(--paper);
  font-size: var(--bodyFontSize);
}
@media (min-width: 42rem) {
  :root {
    --bodyFontSize: 1.1875rem;
  }
}
@media (min-width: 82rem) {
  :root {
    --bodyFontSize: 1.25rem;
  }
}
@media (min-width: 42rem) {
  :root {
    --margin: var(--halfNote);
  }
}
@media (min-width: 56rem) {
  :root {
    --margin: var(--dottedHalfNote);
  }
}
@media (min-width: 108rem) {
  :root {
    --margin: var(--wholeNote);
  }
}
@media (min-width: 122rem) {
  :root {
    --margin: var(--dottedWholeNote);
  }
}
:root.dark {
  --paper: var(--black);
  --paperHSL: var(--blackHSL);
  --ink: var(--white);
  --headingColor: var(--white);
  --accentColor: var(--lightBlue);
  --linkColor: var(--lightBlue);
  --highlightColor: var(--darkerGray);
  --lighterGray: hsl(var(--lightGrayHS), 26%);
  --lightestGray: hsl(var(--lightGrayHS), 13%);
}
@media (prefers-color-scheme: dark) {
  :root:not(/* (unused) .light*/) {
    --paper: var(--black);
    --paperHSL: var(--blackHSL);
    --ink: var(--white);
    --headingColor: var(--white);
    --accentColor: var(--lightBlue);
    --linkColor: var(--lightBlue);
    --highlightColor: var(--darkerGray);
  }
}

.transition-wrapper.span.svelte-1p2e9d7 {
  grid-column: 1/-1;
  grid-row: 1/2;
}:root {
  --lightBlueHS: 199, 33%;
  --yellowHS: 49, 100%;
  --redHS: 349, 100%;
  --lightGrayHS: 220, 2%;
  --yellowHSL: 49.1, 100%, 50%;
  --lightGrayHSL: 220, 2%, 66%;
  --lightBlueHSL: 199, 33%, 60.95%;
  --darkBlueHSL: 201, 42%, 35.2%;
  --orangeHSL: 22, 100%, 53.8%;
  --redHSL: 349, 100%, 45%;
  --midGrayHSL: 204, 2%, 54%;
  --darkGrayHSL: 210, 4%, 27%;
  --darkerGrayHSL: 349, 25%, 16%;
  --whiteHSL: 0, 0%, 99%;
  --trueWhiteHSL: 0, 0%, 100%;
  --blackHSL: 210, 33%, 9.5%;
  --trueBlackHSL: 0, 0%, 0%;
  --white: hsl(var(--whiteHSL));
  --trueWhite: hsl(var(--trueWhiteHSL));
  --black: hsl(var(--blackHSL));
  --trueBlack: hsl(var(--trueBlackHSL));
  --headingFont: "Averta-Std", -apple-system, system-ui, BlinkMacSystemFont,
  	"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bodyFont: "Alkes", Georgia, serif;
  --codeFont: "MonoLisa", Consolas, Monaco, "Andale Mono", "Ubuntu Mono",
  	monospace;
  --bodyFontWeight: normal;
  --bodyFontSize: 1.125rem;
  --bodyLineHeight: calc(var(--quarterNote) * 1.25);
  --yellow: hsl(var(--yellowHSL));
  --orange: hsl(var(--orangeHSL));
  --red: hsl(var(--redHSL));
  --lightestGray: hsl(var(--lightGrayHS), 94%);
  --lighterGray: hsl(var(--lightGrayHS), 86%);
  --lightGray: hsl(var(--lightGrayHSL));
  --midGray: hsl(var(--midGrayHSL));
  --darkGray: hsl(var(--darkGrayHSL));
  --darkerGray: hsl(var(--darkerGrayHSL));
  --lightBlue: hsl(var(--lightBlueHSL));
  --lighterBlue: hsl(var(--lightBlueHS), 90%);
  --lightestBlue: hsl(var(--lightBlueHS), 95%);
  --darkBlue: hsl(var(--darkBlueHSL));
  --darkerBlue: hsl(var(--darkBlueHSL), 20%);
  --darkGreen: hsl(180, 100%, 20%);
  --blueToYellow: #7ba7bc, #75b1bf, #66c6b6, #4fd27b, #56e035, #acef1b, #faf008,
  	#ffd100;
  --ink: var(--darkGray);
  --paper: var(--white);
  --paperHSL: var(--whiteHSL);
  --headingColor: var(--darkerGray);
  --accentColor: var(--darkBlue);
  --linkColor: var(--darkBlue);
  --highlightColor: var(--darkGray);
  --maxWidth: 34rem;
  --sidebarWidth: 15rem;
  --margin: var(--quarterNote);
  --sixteenthNote: calc(var(--quarterNote) / 4);
  --eighthNote: calc(var(--quarterNote) / 2);
  --quarterNote: 1.25rem;
  --dottedQuarterNote: calc(var(--quarterNote) * 1.5);
  --halfNote: calc(var(--quarterNote) * 2);
  --dottedHalfNote: calc(var(--quarterNote) * 3);
  --wholeNote: calc(var(--quarterNote) * 4);
  --tiedWholeNote: calc(var(--quarterNote) * 5);
  --dottedWholeNote: calc(var(--quarterNote) * 6);
  --buttonSize: 2.2rem;
  --buttonBackground: var(--paper);
  font-size: var(--bodyFontSize);
}
@media (min-width: 42rem) {
  :root {
    --bodyFontSize: 1.1875rem;
  }
}
@media (min-width: 82rem) {
  :root {
    --bodyFontSize: 1.25rem;
  }
}
@media (min-width: 42rem) {
  :root {
    --margin: var(--halfNote);
  }
}
@media (min-width: 56rem) {
  :root {
    --margin: var(--dottedHalfNote);
  }
}
@media (min-width: 108rem) {
  :root {
    --margin: var(--wholeNote);
  }
}
@media (min-width: 122rem) {
  :root {
    --margin: var(--dottedWholeNote);
  }
}
:root.dark {
  --paper: var(--black);
  --paperHSL: var(--blackHSL);
  --ink: var(--white);
  --headingColor: var(--white);
  --accentColor: var(--lightBlue);
  --linkColor: var(--lightBlue);
  --highlightColor: var(--darkerGray);
  --lighterGray: hsl(var(--lightGrayHS), 26%);
  --lightestGray: hsl(var(--lightGrayHS), 13%);
}
@media (prefers-color-scheme: dark) {
  :root:not(/* (unused) .light*/) {
    --paper: var(--black);
    --paperHSL: var(--blackHSL);
    --ink: var(--white);
    --headingColor: var(--white);
    --accentColor: var(--lightBlue);
    --linkColor: var(--lightBlue);
    --highlightColor: var(--darkerGray);
  }
}

.page-head.svelte-3ljk99 {
  --transition: transform 0.24s cubic-bezier(0.165, 0.84, 0.44, 1);
  margin-bottom: var(--halfNote);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  contain: layout;
  overflow: hidden;
  position: relative;
  z-index: 0;
  font-size: 1.1rem;
  min-height: 2.2rem;
}
.page-head.svelte-3ljk99 .heading-wrapper:where(.svelte-3ljk99) {
  display: flex;
  position: relative;
  width: auto;
}
.page-head.svelte-3ljk99 .heading-wrapper:where(.svelte-3ljk99) .brace:where(.svelte-3ljk99) {
  font-family: var(--headingFont);
  font-weight: normal;
  font-size: 1.25em;
  color: var(--lightGray);
  margin: 0 0.1em 0 0;
  z-index: 2;
  position: relative;
  left: -1px;
}
.page-head.svelte-3ljk99 .heading-wrapper:where(.svelte-3ljk99) .brace.closing-brace:where(.svelte-3ljk99) {
  color: var(--yellow);
  margin: 0;
  transition: var(--transition);
  transform: translateX(calc(-100% + 0.3em));
  position: absolute;
  left: 100%;
  width: 100%;
  background: var(--paper);
  box-shadow: 3rem 0 0 1rem var(--paper);
  overflow: visible;
}
.page-head.svelte-3ljk99 .heading-wrapper.in:where(.svelte-3ljk99) .closing-brace:where(.svelte-3ljk99) {
  transform: translateX(0);
}
.page-head.svelte-3ljk99 .heading-wrapper.no-motion:where(.svelte-3ljk99) .closing-brace:where(.svelte-3ljk99) {
  transform: translateX(0);
}
.page-head.svelte-3ljk99 h1:where(.svelte-3ljk99) {
  font-size: inherit;
  margin: 0 0.25rem 0 0;
  padding: 0;
  width: -moz-max-content;
  width: max-content;
  font-weight: normal;
  display: flex;
  align-items: center;
}
.page-head.svelte-3ljk99 h1:where(.svelte-3ljk99) .title-wrap:where(.svelte-3ljk99) {
  position: relative;
  z-index: 1;
  background: linear-gradient(90deg, #a7a8aa, #92abb2, #5eca78, #b6ec1f, #ffd100);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  font-family: var(--headingFont);
  text-transform: lowercase;
  flex: 0 1 auto;
  white-space: nowrap;
  line-height: 1.2;
}