@font-face {
  font-family: 'RT Alias Medium';
  font-style: normal;
  font-weight: 400;
  src: local(''), url('/fonts/RTAliasMedium-Regular.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'RT Alias Medium';
  font-style: italic;
  font-weight: 400;
  src: local(''), url('/fonts/RTAliasMedium-RegularOblique.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'RT Alias Medium';
  font-style: normal;
  font-weight: 700;
  src: local(''), url('/fonts/RTAliasMedium-Bold.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'RT Alias Medium';
  font-style: italic;
  font-weight: 700;
  src: local(''), url('/fonts/RTAliasMedium-BoldOblique.woff2') format('woff2');
  font-display: swap;
}

/** sanitize.css makes the line-height 1.5 globally, fix this for headers */
h1,h2,h3,h4,h5,h6 {
  line-height: 1.11;
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

:focus:not(:focus-visible) {
  outline: none
}

:focus-visible {
  outline: 2px dashed var(--color-blue);
}

:root {
  --color-tan: #f4efed;
  --color-tan-rgb: 244, 239, 237;
  --color-dawn: #f3e9fa;
  --color-dusk: #514375;
  --color-midnight: #31274a;
  --color-midnight-rgb: 49, 39, 74;
  --color-blue: #205eff;
  --color-red: #ff5050;
  --color-yellow: #ffd542;
  --color-purple: #af43ff;
  --color-pink: #FDB2B7;

  --gradient-pop-1: linear-gradient(180deg, #205eff 0%, #c238bd 115%);
  --gradient-pop-2: repeating-linear-gradient(
    135deg,
    #ff9776 0em,
    #769cff 1em,
    #c238bd 2em,
    #ff9776 3em
  );
  --gradient-pop-3: linear-gradient(180deg, #ffb4b4 0%, #c487f0 100%);
  --gradient-pop-4: linear-gradient(
    0deg,
    #632cca -33%,
    #62289e 10%,
    #30216b 50%,
    #1f1638 100%
  );
  --gradient-pop-5: linear-gradient(
    180deg,
    #ffd542 0%,
    #ff5050 25%,
    #af43ff 100%
  );
  --gradient-mood: linear-gradient(
    180deg,
    #d8c5ef 0%,
    rgba(225, 213, 238, 0) 100%
  );

  --shadow-sm: 0px 19px 53px 0px rgba(var(--color-midnight-rgb), 0.03),
    0px 10px 28px 0px rgba(var(--color-midnight-rgb), 0.05),
    0px 6px 16px 0px rgba(var(--color-midnight-rgb), 0.05),
    0px 3px 9px 0px rgba(var(--color-midnight-rgb), 0.075),
    0px 1px 4px 0px rgba(var(--color-midnight-rgb), 0.1);
  --shadow-md: 0px 2px 2px 0px rgba(var(--color-midnight-rgb), 0.04),
    0px 6px 5px 0px rgba(var(--color-midnight-rgb), 0.06),
    0px 15px 14px 0px rgba(var(--color-midnight-rgb), 0.08),
    0px 50px 46px 0px rgba(var(--color-midnight-rgb), 0.12);
  --shadow-xl: 0px 3px 2px 0px rgba(var(--color-midnight-rgb), 0.02),
    0px 6px 5px 0px rgba(var(--color-midnight-rgb), 0.03),
    0px 12px 10px 0px rgba(var(--color-midnight-rgb), 0.04),
    0px 22px 18px 0px rgba(var(--color-midnight-rgb), 0.04),
    0px 42px 34px 0px rgba(var(--color-midnight-rgb), 0.05),
    0px 100px 80px 0px rgba(var(--color-midnight-rgb), 0.07);

  --blur-md: blur(10px);
  --blur-xl: blur(128px);

  --font-base: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --font-body: var(--font-base);
  --font-display: "RT Alias Medium", var(--font-base);
  --font-mono: Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace;

  --corner-md: 12px;

  --size-300: clamp(0.7rem, 0.66rem + 0.2vw, 0.8rem);
  --size-400: clamp(0.88rem, 0.83rem + 0.24vw, 1rem);
  --size-500: clamp(1.09rem, 1rem + 0.47vw, 1.33rem);
  --size-600: clamp(1.37rem, 1.21rem + 0.8vw, 1.78rem);
  --size-700: clamp(1.71rem, 1.45rem + 1.29vw, 2.37rem);
  --size-800: clamp(2.14rem, 1.74rem + 1.99vw, 3.16rem);
  --size-900: clamp(2.67rem, 2.07rem + 3vw, 4.21rem);
  --size-1000: clamp(3.34rem, 2.45rem + 4.43vw, 5.61rem);

  /* @property fallbacks */
  --border-radius: 4;
  --pixel-size: 4;
  --link-color-stop-a: #205eff;
  --link-color-stop-b: #c238bd;

  background: var(--color-tan);
}

body {
  display: flex;
  flex-direction: column;
}

.transition #root {
  opacity: 0;
}

@property --border-radius {
    syntax: '<integer>';
    inherits: true;
    initial-value: 4;
}
@property --pixel-size {
    syntax: '<integer>';
    inherits: true;
    initial-value: 4;
}
@property --link-color-stop-a {
    syntax: '<color>';
    inherits: false;
    initial-value: #205eff;
}
@property --link-color-stop-b {
    syntax: '<color>';
    inherits: false;
    initial-value: #c238bd;
}

a {
  color: var(--color-blue);
  text-decoration: none;
}
a:visited {
  color: #7D4796;
}
a:is(:hover, :focus) {
  text-decoration: underline;
}
a:active {
  color: var(--color-purple);
}

.logo a {
  color: var(--color-midnight);
}

small {
  font-size: 0.75em;  
}

.pixel {
  --border-radius: 8;
  --pixel-size: 4;
  --background: var(--gradient-pop-1);
  position: relative;
  border-radius: calc(var(--border-radius) * 1px);
}
.pixel::before {
  content: '';
  position: absolute;
  top: calc(var(--pixel-size) * 1px);
  right: 0;
  bottom: calc(var(--pixel-size) * 1px);
  left: 0;
  background: var(--background);
  z-index: -1;
}
.pixel::after {
  content: '';
  position: absolute;
  top: 0;
  right: calc(var(--pixel-size) * 1px);
  bottom: 0;
  left: calc(var(--pixel-size) * 1px);
  background: var(--background);
  z-index: -1;
}
.pixel.variant-outline {
  background: rgba(255, 255, 255, 0);
  border-radius: 0;
}
.pixel.variant-outline::before {
  background: rgba(255, 255, 255, 0);
  border: calc(var(--pixel-size) * 1px) solid var(--background);
  border-top: 0;
  border-bottom: 0;
}
.pixel.variant-outline::after {
  background: rgba(255, 255, 255, 0);
  border: calc(var(--pixel-size) * 1px) solid var(--background);
  border-right: 0;
  border-left: 0;
}

@supports (background: paint(pixel)) {
    .js .pixel {
        background: none !important;
    }
    .js .pixel::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        display: block;
        z-index: -1;
        overflow: hidden;
        border-radius: 0;
        background: var(--background);
        -webkit-mask-image: paint(pixel);
        mask-image: paint(pixel);
    }
    .js .pixel::after {
      content: none;
    }
}

html {
  font-family: var(--font-body);
  color: var(--color-midnight);
  min-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
}

::selection {
  background: var(--color-blue);
  color: white;
}

.text-gradient::selection {
  --fill: white;
  color: var(--fill);
  -webkit-background-clip: initial;
  -webkit-text-fill-color: initial;
}

.text-gradient {
  background: var(--fill, var(--gradient-pop-1));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

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

.container {
  max-width: 40rem;
  padding-left: 0.5em;
  padding-right: 0.5em;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 40rem) {
  .container {
    padding-left: 1em;
    padding-right: 1em;
  }
}

@media (min-width: 52rem) {
  .container {
    max-width: 50rem;
  }
}

@media (min-width: 64rem) {
  .container {
    max-width: 62rem;
  }
}

@media (min-width: 82rem) {
  .container {
    max-width: 80rem;
  }
}

@media (min-width: 92rem) {
  .container {
    max-width: 90rem;
  }
}

.head-sm {
  font-family: var(--font-display);
  font-size: var(--size-600);
  letter-spacing: -0.5px;
  line-height: 1.2;
}

.head-md {
  font-family: var(--font-display);
  font-size: var(--size-700);
  letter-spacing: -0.5px;
  line-height: 1.2;
}

p, .body-md {
  font-family: var(--font-body);
  font-size: var(--size-500);
  line-height: 1.3;
}

.elevation-xl {
  box-shadow: var(--shadow-xl);
}

.elevation-md {
  box-shadow: var(--shadow-md);
}

.container {
    width: 100%;
}

#article :is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--font-display);
    line-height: 1.1;
    margin-bottom: 1.25rem;
    color: var(--color-dusk);
}
#article hr {
    border: 0;
    border-top: 1px solid var(--color-dawn);
    margin-left: -2rem;
    margin-right: -2rem;
    margin-top: 1rem;
    margin-bottom: 2rem;
}
#article h1 {
    --fill: var(--gradient-pop-1);
    font-size: 3rem;
    font-size: var(--size-800);
    
}
#article h2 {
    font-size: 2rem;
    font-size: var(--size-600);
    margin-top: 2em;
    margin-bottom: -0.25em;
}

#article code {
    font-family: var(--font-mono);
    font-weight: 400;
    white-space: pre-wrap;
    word-break: break-word;
}

#article code:not([class]) {
    font-size: 0.85em;
    color: var(--color-purple);
}

#article code:not([class])::before {
    content: '\`';
}
#article code:not([class])::after {
    content: '\`';
}

.astro-code > code::before,
.astro-code > code::after {
    content: none !important;
}

#article img {
    max-width: 100%;
}

#article :is(h2, h3, h4, h5, h6) a {
    font: inherit;
    color: inherit;
    text-decoration: none !important;
    display: flex;
}

#article :is(h2, h3, h4, h5, h6) a::before {
    content: "#";
    width: 1em;
    margin-left: 0.25em;
    color: inherit;
    opacity: 0;
    transition: opacity 200ms cubic-bezier(0.23, 1, 0.320, 1);
    order: 999;
}

@media (min-width: 50rem) {
    #content :is(h2, h3, h4, h5, h6) a::before {
        order: initial;
        margin-left: -1em;
    }
}

#article :is(h2, h3, h4, h5, h6) a:is(:active, :visited, :hover, :focus) {
    color: var(--color-dusk);
}

#article :is(h2, h3, h4, h5, h6) a:active::before,
#article :is(h2, h3, h4, h5, h6) a:hover::before,
#article :is(h2, h3, h4, h5, h6) a:focus::before {
    opacity: 0.6 !important;
}

#article :is(strong, b) {
    font-family: inherit;
    font-weight: 600;
}

#article :is(em, i) {
    font-weight: 400;
    font-style: normal;
}

#article :is(ul:not([role="list"]), ol:not([role="list"])) {
    padding-left: 1.5em;
}

#article :where(ul:not([role="list"])) {
    list-style-type: square;
}

#article :where(ul:not([role="list"]) > li + li) {
    margin-top: 0.25em;
} 

#article ::marker {
    color: rgba(var(--color-midnight-rgb), 0.5);
}

#article pre > code:not([class*='language']) {
	background-color: transparent;
	padding: 0;
	margin: 0;
	border-radius: 0;
	color: inherit;
}

#article pre > code {
	font-size: 1em;
}

#article pre {
	position: relative;
	--padding-block: 1rem;
	--padding-inline: 2rem;
	padding: var(--padding-block) var(--padding-inline);
	padding-right: calc(var(--padding-inline) * 2);
	margin-left: calc(var(--padding-inline) * -1);
	margin-right: calc(var(--padding-inline) * -1);
	font-family: var(--font-mono);

	line-height: 1.5;
	font-size: 0.85em;
	overflow-y: hidden;
	overflow-x: auto;
}

#article pre {
    background: linear-gradient(to bottom, var(--color-midnight), #1F1638);
    color: white;
}

#article table {
	width: 100%;
	padding: var(--padding-block) 0;
	margin: 0;
	border-collapse: collapse;
}

/* Zebra striping */
#article tr:nth-of-type(odd) {
	background: var(--theme-bg-hover);
}
#article th {
	background: var(--color-black);
	color: var(--theme-color);
	font-weight: bold;
}
#article td,
#article th {
	padding: 6px;
	text-align: left;
}

/* Code */

.language-css > code,
.language-sass > code,
.language-scss > code {
	color: #fd9170;
}

.language-diff .token.prefix.deleted,
.language-diff .token.prefix.inserted {
	user-select: none;
}

[class*='language-'] .namespace {
	opacity: 0.7;
}

.token.plain-text,
[class*='language-bash'] span.token,
[class*='language-shell'] span.token {
	color: hsla(var(--color-gray-90), 1);
}

[class*='language-bash'] span.token,
[class*='language-shell'] span.token {
	font-style: bold;
}

.token.prolog,
.token.comment,
[class*='language-bash'] span.token.comment,
[class*='language-shell'] span.token.comment {
	color: rgba(255, 255, 255, 0.67);
}

.token.front-matter-block {
    color: white;
    opacity: 0.8;
}

.token.selector,
.token.tag,
.token.unit,
.token.url,
.token.variable,
.token.entity,
.token.deleted {
	color: #fa5e5b;
}

.token.boolean,
.token.constant,
.token.doctype,
.token.number,
.token.regex,
.token.builtin,
.token.class,
.token.hexcode,
.token.class-name,
.token.attr-name {
	color: hsla(var(--color-yellow), 1);
}

.token.atrule,
.token.attribute,
.token.attr-value .token.punctuation,
.token.attr-value,
.token.pseudo-class,
.token.pseudo-element,
.token.string {
	color: hsla(var(--color-green), 1);
}

.token.symbol,
.token.function,
.token.id,
.token.important {
	color: hsla(var(--color-blue), 1);
}

.token.important,
.token.id {
	font-weight: bold;
}

.token.cdata,
.token.char,
.token.property {
	color: #23b1af;
}

.token.inserted {
	color: hsla(var(--color-green), 1);
}

.token.keyword {
	color: #ff657c;
	font-style: italic;
}

.token.operator {
	color: hsla(var(--color-gray-70), 1);
}

.token.attr-value .token.attr-equals,
.token.punctuation {
	color: hsla(var(--color-gray-80), 1);
}

#nav {
    --offset-height: calc(var(--offset) * 1rem);
    width: 100%;
    position: sticky;
    top: calc((var(--offset-height) * -1) - 1px);
    margin-top: -2rem;
    padding: 0.5rem 0;
    background: linear-gradient(0deg, rgba(var(--color-tan-rgb), 0.7), rgba(var(--color-tan-rgb), 1));
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    z-index: 2;
}
#nav.margin-bottom {
    margin-bottom: -4.5rem;
}
#nav.invert {
    background: transparent;
    color: white;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
#nav.invert a {
    color: white;
}

#nav::before {
    content: '';
    display: block;
    width: 100%;
    height: var(--offset-height);
    z-index: -2;
}
#nav.invert::before {
    background: #1f1638;
    margin-top: -0.5rem;
}

#nav::after {
    position: absolute;
    content: '';
    top: var(--offset-height);
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    box-shadow: var(--shadow-md);
    opacity: 0;
    transition-property: opacity;
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0.23, 1, 0.320, 1);
    z-index: -1;
}

#nav[stuck]::after {
    opacity: 0.5;
    transition-duration: 600ms;
}

#nav ul {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.33rem;
    padding: 0 0.5rem;
}
#nav li {
    color: var(--color-dusk);
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--size-500);
}
#nav.invert li {
    color: white;
}
#nav li + li {
    margin-left: 0;
}
#nav [aria-current="page"] {
    font-weight: 700;
}
#nav .logo {
    font-size: 1rem;
    margin-right: auto;
}
#nav .logo a {
    display: flex;
    align-items: center;
    color: var(--color-midnight);
}
#nav .logo a:hover,
#nav .logo a:focus {
    color: var(--color-midnight);
}
#nav .logo a:active {
    color: var(--color-midnight);
}
#nav .logo svg {
    transform: scale(0.8);
}
#nav .logomark {
    color: inherit;
}
#nav.invert .logo svg {
    color: white;
    fill: white;
}
#nav .wordmark {
    display: none;
    color: inherit;
    margin-top: -0.5rem;
}
#nav .hidden-mobile {
  display: none;
}

@media (min-width: 52rem) {
    #nav {
        /* height: calc(2px + 4.5rem); */
    }
    #nav .logo svg {
        transform: scale(1);
    }
    #nav .wordmark {
        display: block;
    }
    #nav .hidden-mobile {
      display: block;
    }
}
#nav a {
    display: flex;
    height: 100%;
    color: var(--color-midnight);
    text-decoration: none;
    transition: all 200ms cubic-bezier(0.165, 0.84, 0.44, 1);
    transition-property: transform, color;
    padding: 0 0.5rem;
}
#nav a:focus,
#nav a:hover {
    color: var(--color-purple);
}
#nav a:active {
    color: var(--color-blue);
}

#nav .icon a svg {
    transform: scale(0.9);
}

#nav .icon a:focus svg,
#nav .icon a:hover svg {
    transform: scale(1);
}

#nav [astro-icon="logo"] {
    margin-right: 0.25em;
    transform: translateY(0.5em);
}

.checklist {
  font-size: var(--size-500);
  --marker-size: 3rem;
  display: grid;
  gap: 0.75rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  justify-content: center;
  width: 100%;
  max-width: 72rem;
  list-style: none;
}

@media (min-width: 24rem) {
  .checklist {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: flex-start;
  }
  .checklist-item {
    margin-left: 2rem;
  }
}

@media (min-width: 40rem) {
  .checklist {
    padding: 0 1.5rem;
  }
}

@media (min-width: 52rem) {
  .checklist {
    grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  }
}

.checklist > li {
  position: relative;
  display: flex;
  align-items: center;
}

.checklist-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--marker-size);
  height: var(--marker-size);
  background: var(--color-dawn);
  color: var(--color-midnight);
  border-radius: 50%;
  margin-right: 1rem;
}

.checklist-text {
  font-size: var(--size-600);
}

.checklist > li > svg {
  width: var(--marker-size);
  height: var(--marker-size);
}

.egg {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  pointer-events: none;
}

noscript {
  order: -1;
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: var(--size-600);
  text-align: center;
  color: var(--color-midnight);
  background: linear-gradient(to bottom, var(--color-tan), white);
}
noscript::before {
  --size: var(--size-1000);
  padding-top: var(--size);
  padding-left: 1rem;
  padding-right: 1rem;
  content: 'You need to enable JavaScript to view this site.';
  background-size: var(--size);
  background-position: center top;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 140 140'%3E%3Cg fill='%23514375'%3E%3Cpath d='M129.7 100v20h-10v-20z'/%3E%3Cpath d='M119.69 100h20v10h-20zM10 100v20h10v-20z'/%3E%3Cpath d='M20 100H0v10h20zm0-90H0v10h20z'/%3E%3Cpath d='M20 20V0H10v20zm79.69 30h20v10h-20zm-39.21 0h20v10h-20zM29.73 20h80v10h-80zm-9.97 50h99.93v10H19.76zm10 10h79.93v10H29.76zm-.03 10h20v10h-20zm30.75 0h20v10h-20zm29.21 0h20v10h-20zM19.73 30h100v10h-100zm0 10h100v10h-100zm0 20h100v10h-100zm0-10h20v10h-20zM120 10h20v10h-20z'/%3E%3Cpath d='M120 20V0h10v20z'/%3E%3C/g%3E%3C/svg%3E%0A");
}
noscript::after {
  --size: var(--size-1000);
  content: 'Just kidding—you\'re going to love Astro!';
  font-size: 0.75em;
  padding-bottom: var(--size);
  background-size: var(--size);
  background-position: 50% 100%;
  background-image: url("data:image/svg+xml,%3Csvg width='140' height='141' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23af43ff' d='M85 80.325v-20h10v20zM45 80.325v-20h10v20zM65 40.325h10v60H65z'/%3E%3Cpath fill='%23af43ff' d='M55 80.325h30v10H55z'/%3E%3C/svg%3E");
  animation: bounce 1s steps(4) alternate-reverse infinite;
}

@keyframes bounce {
  from {
    background-position: 50% 100%;
  }
  to {
    background-position: 50% calc(100% - 0.5em);
  }
}

not-marquee {
    --color: var(--color-midnight);
    --height: 2rem;
    --speed: 25;
    --gap: var(--size-1000);
    display: flex;
    position: relative;
    width: 100vw;
    height: var(--height);
    overflow: hidden;

    border-top: 1px solid var(--color);
    margin-top: -1px;
    border-bottom: 1px solid var(--color);
    font-family: var(--font-display);
    text-transform: uppercase;
    font-size: 0.75em;
    font-weight: 700;
    letter-spacing: 1px;
    background: white;
    z-index: 3;
    
}

not-marquee::before,
not-marquee::after {
    content: "";
    width: var(--gap);
    height: var(--height);
    position: absolute;
    top: 0;
    right: var(--right, auto);
    bottom: 0;
    left: var(--left, auto);
    background: linear-gradient(var(--dir, to right), white, white 5%, rgba(255, 255, 255, 0));
    z-index: 2;
}

not-marquee::before {
    --left: calc(var(--height) - 4px);
    --dir: to right;
}
not-marquee::after {
    --right: 0;
    --dir: to left;
}

not-marquee input[type="checkbox"] {
    --size: var(--height);
    -webkit-appearance: none;
    appearance: none;
    width: var(--size);
    height: var(--size);
    border-radius: 0;
    z-index: 2;
    background: white;
    margin-top: -1px;
    margin-left: -1px;
    border: 1px solid var(--color);
    display: flex;
    align-items: center;
    justify-content: center;
}

not-marquee input[type="checkbox"]:hover,
not-marquee input[type="checkbox"]:focus {
    background: var(--color-dusk);
}

not-marquee input[type="checkbox"]:active {
    background: var(--color-purple);
}

not-marquee input[type="checkbox"]:hover::before,
not-marquee input[type="checkbox"]:focus::before,
not-marquee input[type="checkbox"]:active::before {
    filter: saturate(0) brightness(0) invert(1);
}

not-marquee input[type="checkbox"]::before {
    content: "";
    width: calc(var(--size) * 0.75);
    height: calc(var(--size) * 0.75);
}

not-marquee input[type="checkbox"]::before {
    /* Pause */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M14 19h4V5h-4M6 19h4V5H6v14z' fill='%2331274a'%3E%3C/path%3E%3C/svg%3E");
}

not-marquee input[type="checkbox"]:checked::before {
    /* Play */
    background-position: -1px center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.14v14l11-7l-11-7z' fill='%2331274a'%3E%3C/path%3E%3C/svg%3E");
}

not-marquee input[type="checkbox"]:checked ~ .track,
not-marquee .track:hover {
    animation-play-state: paused;
}

not-marquee .track {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;

    position: relative;
    white-space: nowrap;
    text-decoration: none;
    color: var(--color);
    transition: color 300ms cubic-bezier(0.23, 1, 0.320, 1);
}

not-marquee a.track:hover,
not-marquee a.track:focus {
    color: var(--color-purple);
}

not-marquee a.track:active {
    color: var(--color-blue);
}

not-marquee .group {
    position: absolute;
    display: block;
    animation: marquee calc(var(--speed) * 1s) linear infinite;
    animation-play-state: inherit;
    user-select: none;
    padding-left: var(--gap);
}

@media (prefers-reduced-motion: reduce) {
    not-marquee .track {
        animation-play-state: paused;
        justify-content: flex-start;
    }
}

not-marquee .group > span + span {
    padding-left: var(--gap);
}

@keyframes marquee {
    from { transform: translateX(calc(100% * var(--i, 0))) }
    to { transform: translateX(calc(100% * calc(var(--i, 0) - 1))) }
}

.skip-link {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    overflow-x: hidden;
    text-align: center;

    background-color: white;
    border-bottom: 1px solid transparent;
    font-family: var(--font-display);
    text-transform: uppercase;
    font-size: 1em;
    font-weight: 700;
    letter-spacing: 1px;
    background: white;
    z-index: 5;

    /* Visually hidden */
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}
.skip-link:focus {
    width: 100vw;
    height: 48px;
    position: fixed;
    clip: initial;
    clip-path: initial;

    background: var(--color-purple);
    color: white;
}

.🥚 {
  --cursor-default: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%2331274a' viewBox='0 0 128 128'%3E%3Cpath fill='%23fff' d='M3.37 0 .11.01C-.05 24.95.04 49.9 0 74.82c.05 13.23-.1 26.46.09 39.68 4.48 0 8.97.04 13.46 0 .12-1.92.15-3.86.15-5.8v-.88h.87c1.91.02 3.82 0 5.72-.01.04-1.96.18-3.92-.03-5.88l-.12-1.1 1.09.15c1.97.25 3.95.08 5.92.04.04-1.88.08-3.77.1-5.65v-.86h.87c1.49.02 2.98 0 4.47-.08l.99-.05-.08.98c-.3 4.12.39 8.24.16 12.36 1.95.06 3.89.09 5.83.1l.85.02.01.84c.04 4.18.03 8.35.1 12.52 1.92.04 3.84.06 5.76.07h.86l.01.85c.03 1.95.05 3.88.04 5.83 4.52.06 9.04.05 13.56.03.16-1.92.24-3.86.1-5.81l-.07-.96.96.03c1.91.05 3.84.03 5.73-.02.07-4.5.04-9 0-13.49-1.94-.05-3.87-.08-5.8-.1h-.84l-.01-.85c-.07-4.18-.04-8.35-.06-12.53-1.93-.07-3.88-.1-5.83-.06l-.92.03.03-.92c.07-1.62.1-3.22.09-4.82v-.87h.87c8.63-.01 17.27 0 25.91-.1.06-4.48.07-8.96-.01-13.44-1.94 0-3.88-.02-5.82-.05h-.85v-.85c-.03-1.94-.05-3.89-.04-5.83a252.3 252.3 0 0 0-5.8-.07h-.85l-.01-.85c-.03-1.93-.04-3.85-.08-5.78-1.93-.09-3.87-.14-5.82-.12l-.88.01v-.88a567 567 0 0 0-.03-5.84 226 226 0 0 1-5.83-.04l-.85-.02v-.85c0-1.9-.02-3.8-.07-5.71-1.92-.1-3.85-.12-5.78-.13h-.86v-.86c-.04-1.94-.06-3.88-.05-5.83-1.95 0-3.89-.02-5.83-.05l-.82-.01-.04-.83c-.07-1.94-.14-3.9-.15-5.84-1.9-.04-3.8-.05-5.7-.05h-.85l-.02-.85a170.8 170.8 0 0 1-.05-5.82c-1.95-.02-3.89-.03-5.83-.06l-.83-.01-.03-.83c-.07-1.94-.1-3.88-.1-5.84-1.94-.04-3.87-.05-5.8-.06h-.86l-.01-.86c-.01-1.93-.03-3.87-.07-5.8l-5.84-.03-.84-.01-.01-.85-.04-5.83c-1.94-.06-3.9-.04-5.86-.03h-.86v-.86A162 162 0 0 0 6.63.01L3.37 0Z'/%3E%3Cpath d='M.1.02C2.3-.01 4.48 0 6.66.02c.1 2.22.14 4.45.14 6.68 2.24-.02 4.48-.02 6.71.05 0 2.22.01 4.45.04 6.67-2.26-.02-4.51-.01-6.77 0-.01 31.42.07 62.83.04 94.25 2.23.02 4.46.03 6.68-.02-.02-2.22 0-4.44.01-6.66 2.23-.03 4.48-.23 6.69.17.36 2.2.16 4.44.1 6.65-2.18.03-4.37.05-6.56.02.02 2.23-.04 4.46-.18 6.68-4.48.03-8.97-.01-13.46 0-.18-13.23-.03-26.46-.08-39.69C.05 49.9-.05 24.96.11.03Z'/%3E%3Cpath d='m13.54 13.42 6.69.04c.05 2.21.06 4.43.08 6.65 2.22 0 4.44.02 6.66.07 0 2.22 0 4.45.11 6.67 2.23.04 4.45.05 6.68.07-.02 2.22 0 4.44.06 6.66 2.19 0 4.38.01 6.57.07 0 2.22.1 4.44.17 6.66 2.21.04 4.44.05 6.66.06-.01 2.22 0 4.44.04 6.66 2.22 0 4.44.03 6.65.15.07 2.2.09 4.38.09 6.58 2.22.06 4.44.07 6.66.06.02 2.22.04 4.45.04 6.68-2.25.12-4.5.1-6.75.04v-6.69c-2.25-.03-4.51-.02-6.77 0 .03-2.26.04-4.51 0-6.76h-6.7l.02-6.7c-2.26-.05-4.52-.04-6.77 0 0-2.26.01-4.52-.01-6.77h-6.7c-.03-2.24-.02-4.49-.04-6.73-2.25 0-4.49 0-6.73-.05.02-2.23.02-4.45 0-6.68-2.22-.02-4.44-.02-6.66 0-.07-2.25-.06-4.5-.05-6.74ZM60.7 60.5a93.2 93.2 0 0 1 6.69.14c.04 2.2.06 4.42.09 6.62 2.22 0 4.43.02 6.65.08-.01 2.22 0 4.45.04 6.68 2.22.03 4.45.05 6.67.05.08 4.48.07 8.95.02 13.43-8.93.1-17.86.1-26.78.12 0 2.2.02 4.4-.1 6.59-2.25.11-4.5.08-6.76.07-.06-4.5-.06-8.99 0-13.48 8.97-.05 17.95.03 26.92-.01.03-2.25.03-4.5 0-6.74-2.24-.02-4.5-.01-6.73-.05v-6.68a296.6 296.6 0 0 0-6.67 0c-.09-2.27-.09-4.54-.04-6.82ZM27 87.48c2.23-.02 4.46-.01 6.69 0 .08 2.3.18 4.62-.13 6.91-2.1.17-4.2.15-6.3.12 0 2.17-.05 4.34-.1 6.51-2.23.05-4.49.28-6.7-.14-.46-2.18-.24-4.44-.2-6.65l6.7-.01c0-2.25 0-4.5.04-6.74Zm6.56 6.92c2.3-.26 4.6-.18 6.9-.14.06 4.47.01 8.95.04 13.43 2.24 0 4.49 0 6.73.04.02 4.46-.04 8.92.03 13.38 4.5.07 9-.14 13.5.12.26 2.24.12 4.5-.07 6.75-4.52.02-9.03.04-13.55-.02 0-2.23-.01-4.45-.06-6.68-2.2 0-4.42-.03-6.63-.07-.07-4.46-.05-8.92-.1-13.37a270.1 270.1 0 0 1-6.67-.12c.24-4.45-.64-8.9-.12-13.33Z'/%3E%3Cpath d='M53.98 94.2a79.3 79.3 0 0 1 6.72.05c.02 4.45-.03 8.91.05 13.38 2.22.02 4.43.04 6.65.1.05 4.5.08 9 .01 13.5-2.21.05-4.44.1-6.65 0-.25-4.48-.04-8.97-.09-13.45-2.25-.05-4.5-.04-6.76-.06 0-4.5-.05-9.01.07-13.51Z'/%3E%3C/svg%3E%0A") 0 0, default;
  --cursor-pointer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%2331274a' viewBox='0 0 128 128'%3E%3Cg clip-path='url(%23a)'%3E%3Cpath fill='%23fff' d='M29.14.42a426.8 426.8 0 0 0-.05 5.06l-.01.71-.7.03c-1.7.05-3.38.07-5.08.08-.09 17.14-.04 34.27-.04 51.4v.74l-.74.01c-1.42.02-2.86.03-4.29.07l-.77.01v-.77c.04-1.67.03-3.35-.01-5.01-5.81-.05-11.63-.08-17.44.02 0 5.79-.02 11.58 0 17.37 1.68.03 3.39.1 5.1-.01l.92-.07-.14.93c-.24 1.67-.08 3.36-.07 5.04 1.6.08 3.23.1 4.85.1h.7l.05.69c.27 3.58.14 7.17.2 10.77 1.67.07 3.35.1 5.03.11l.73.01v.73c.03 3.6.02 7.18.08 10.77 1.69.03 3.38.11 5.09.01l.86-.05-.07.85c-.28 3.6-.04 7.21-.07 10.81 1.65.03 3.29.06 4.93.07h.74v.73c.08 5.55.05 11.1.12 16.65 9.57.13 19.15.15 28.73.14 9.8-.02 19.6.06 29.41-.17-.15-5.53.34-11.06.11-16.59l-.02-.8.79.03c1.64.04 3.3.01 4.93-.04.06-5.5.07-11 .07-16.51v-.68l.67-.07c1.68-.16 3.36-.17 5.05-.16.04-6.16-.07-12.32.12-18.48v-.03c-.2-7.4-.06-14.81-.15-22.22-1.66.01-3.32 0-4.97-.03h-.72l-.02-.73a135.9 135.9 0 0 1-.02-4.91c-1.7-.05-3.4 0-5.1-.1l-.64-.03-.05-.66c-.12-1.7-.06-3.41-.09-5.13-3.6-.02-7.22.01-10.82-.04h-.73l-.01-.74c-.03-1.63-.05-3.26-.03-4.9-5.54-.29-11.1-.1-16.64-.16l-.71-.01-.03-.7c-.07-1.68-.1-3.37-.1-5.06-3.6-.02-7.2 0-10.8-.07l-.73-.02v-.72c-.08-7.46-.04-14.92-.06-22.38a371.76 371.76 0 0 0-5.03 0h-.77l.01-.76c.03-1.72.02-3.43-.14-5.13-3.81.01-7.62.02-11.43 0Z'/%3E%3Cpath d='M29.13.42c3.81.02 7.63.01 11.44 0 .18 1.92.17 3.84.14 5.75-3.88.04-7.75 0-11.63.04.02-1.93.02-3.86.05-5.79ZM23.3 6.3c1.93-.01 3.86 0 5.78-.09 0 21.32.04 42.63.02 63.95-1.94.04-3.88.04-5.83 0-.03-1.9-.03-3.82 0-5.73-1.94-.08-3.87-.07-5.8-.06a81.5 81.5 0 0 1 0-5.85c1.93-.07 3.86-.05 5.79-.08 0-17.38-.05-34.76.04-52.14Zm17.43 0c1.92-.02 3.84 0 5.77.01.02 7.7-.03 15.42.05 23.12 3.85.1 7.7.05 11.54.07 0 1.92 0 3.84.11 5.77 5.79.09 11.59-.14 17.37.16-.02 1.88-.01 3.76.03 5.64 3.85.07 7.71.02 11.57.04.02 1.93-.1 3.87.1 5.8 1.92.16 3.84.06 5.76.12-.03 1.88-.01 3.76.04 5.64 1.9.03 3.8.05 5.7.03.09 7.42-.06 14.83.15 22.23-.2 6.17-.08 12.34-.12 18.5a43.63 43.63 0 0 0-5.72.22c0 5.73-.01 11.47-.07 17.2-1.9.06-3.82.12-5.72.03-.21-5.83-.11-11.67-.06-17.51 1.92.02 3.84.02 5.76 0L93 52.72c-1.92-.03-3.83-.02-5.75 0-.1-1.89.02-3.78-.13-5.66-1.9-.37-3.85-.15-5.77-.15-.04 5.8.07 11.62-.04 17.44h-5.7c-.13-7.75 0-15.5-.04-23.26-3.89-.02-7.78 0-11.66 0 0 5.81.06 11.62 0 17.43-1.93.04-3.86.04-5.78 0-.04-7.75-.04-15.5.05-23.24-3.89-.02-7.78-.03-11.67.02-.04 7.74.03 15.48 0 23.22-1.94.05-3.9.06-5.84 0 0-17.4.02-34.8.05-52.21ZM0 52.76c5.82-.1 11.64-.06 17.45-.01.04 1.92.07 3.84.02 5.77-3.86.1-7.71.02-11.57.05-.14 3.84.2 7.7-.05 11.53-1.95.22-3.9.07-5.85.03V52.76Zm6 17.47c1.87-.3 3.77-.18 5.65-.13.04 1.94.04 3.88.02 5.82 1.95.01 3.88 0 5.82.03.05 3.87 0 7.73.03 11.6 1.91-.02 3.83-.01 5.75.01-.03 3.88.25 7.79-.14 11.64-1.9.17-3.79.04-5.67 0-.06-3.82-.05-7.65-.09-11.48-1.92-.01-3.84-.05-5.76-.13-.06-3.81.13-7.63-.22-11.44a115 115 0 0 1-5.57-.12c0-1.94-.26-3.9.18-5.8Z'/%3E%3Cpath d='M23.39 99.23c1.9-.15 3.8-.06 5.7-.05.06 3.86.01 7.71.02 11.57 1.94-.01 3.88-.01 5.82.06.03 3.85-.04 7.71.02 11.57 15.46.04 30.92.03 46.38.02.06-3.86-.01-7.72.03-11.58 1.98-.03 3.95-.05 5.93.06.32 5.78-.25 11.57-.09 17.37-9.8.23-19.6.15-29.4.16-9.59.01-19.16 0-28.73-.13-.08-5.8-.04-11.59-.13-17.37-1.89 0-3.78-.04-5.67-.07.03-3.87-.28-7.77.12-11.61Z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Cpath fill='%23fff' d='M0 0h128v128H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E") 8 0, pointer;

  cursor: var(--cursor-default); 
}

.🥚 :is(a, button, input[type="checkbox"]) {
  cursor: var(--cursor-pointer);
}