@font-face {
  font-family: Manrope;
  src: url("/fonts/manrope-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Space Grotesk";
  src: url("/fonts/space-grotesk-latin.woff2") format("woff2");
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --refresh-ink: #101a28;
  --refresh-surface: #182638;
  --refresh-blue-ink: #202e4b;
  --refresh-paper: #f5f2e8;
  --refresh-muted: #c0cad6;
  --refresh-mint: #a9ebbd;
  --refresh-cobalt: #477cf4;
  --refresh-gold: #eeca72;
  --refresh-rose: #c35762;
  --refresh-line: #3a4a5a;
  --refresh-display: "Space Grotesk", "Trebuchet MS", sans-serif;
  --refresh-text: Manrope, "Helvetica Neue", sans-serif;
  --refresh-ease: cubic-bezier(.18, .78, .21, 1);
}

.refresh-shell {
  color-scheme: dark;
  background: var(--refresh-ink);
  color: var(--refresh-paper);
  font-family: var(--refresh-text);
}

.refresh-shell *,
.refresh-shell *::before,
.refresh-shell *::after {
  box-sizing: border-box;
}

.refresh-shell ::selection {
  background: var(--refresh-mint);
  color: var(--refresh-ink);
}

.refresh-shell :focus-visible {
  outline: 2px solid var(--refresh-gold);
  outline-offset: 3px;
}

.refresh-shell__inner {
  width: min(100% - clamp(2rem, 8vw, 9rem), 80rem);
  margin-inline: auto;
}

.refresh-shell--nav {
  position: relative;
  z-index: 5;
}

.refresh-shell--nav .refresh-shell__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 5.1rem;
  gap: .4rem 1rem;
  border-bottom: 1px solid var(--refresh-line);
}

.refresh-shell .refresh-wordmark {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  min-height: 44px;
  flex: 0 0 auto;
  color: var(--refresh-paper);
  text-decoration: none;
  font: 700 1.18rem var(--refresh-display);
  letter-spacing: -.035em;
}

.refresh-shell .refresh-wordmark img {
  display: block;
  transition: transform .6s var(--refresh-ease);
}

.refresh-shell .refresh-wordmark:is(:hover, :focus-visible) img {
  transform: rotate(24deg);
}

.refresh-shell__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: .125rem clamp(.7rem, 2vw, 1.75rem);
}

.refresh-shell__nav a,
.refresh-shell__nav summary {
  display: flex;
  align-items: center;
  gap: .45rem;
  min-height: 44px;
  color: var(--refresh-muted);
  font: 700 .875rem var(--refresh-text);
  text-decoration: none;
}

.refresh-shell__nav :is(a, summary):hover,
.refresh-shell__nav [aria-current],
.refresh-shell__nav details[open] > summary {
  color: var(--refresh-mint);
}

.refresh-shell__nav details {
  position: relative;
}

.refresh-shell__nav summary {
  cursor: pointer;
  list-style: none;
}

.refresh-shell__nav summary::-webkit-details-marker {
  display: none;
}

.refresh-shell__nav summary svg {
  transition: transform .18s var(--refresh-ease);
}

.refresh-shell__nav details[open] summary svg {
  transform: rotate(180deg);
}

.refresh-shell__menu {
  position: absolute;
  z-index: 1;
  inset-inline-start: -.8rem;
  min-width: 11rem;
  padding: .25rem .75rem;
  margin: 0;
  border: 1px solid var(--refresh-line);
  border-radius: 4px;
  background: var(--refresh-surface);
  list-style: none;
}

.refresh-shell__menu li + li {
  border-top: 1px solid var(--refresh-line);
}

.refresh-shell__nav details:last-child .refresh-shell__menu {
  inset-inline: auto -.8rem;
}

.refresh-shell--footer .refresh-shell__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .65rem 1rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--refresh-line);
  padding-block: 1rem;
  color: var(--refresh-muted);
  font-size: .875rem;
}

.refresh-shell--footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--refresh-mint);
  text-decoration: underline;
  text-underline-offset: .25em;
}

@media (max-width: 680px) {
  .refresh-shell--nav .refresh-shell__inner {
    flex-wrap: wrap;
    padding-block: .5rem;
  }

  .refresh-shell__nav {
    position: relative;
    width: 100%;
    justify-content: flex-start;
  }

  .refresh-shell__nav details {
    position: static;
  }

  .refresh-shell__nav details .refresh-shell__menu,
  .refresh-shell__nav details:last-child .refresh-shell__menu {
    inset: 100% 0 auto;
  }

  .refresh-shell__nav :is(a, summary) {
    font-size: .8125rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .refresh-shell .refresh-wordmark img,
  .refresh-shell__nav summary svg {
    transition: none;
  }
}