:root {
  --access-ink: #17332d;
  --access-moss: #286052;
  --access-mint: #dcece5;
  --access-paper: #fbfaf5;
}

body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% 5%, rgba(180, 220, 203, .44), transparent 28rem),
    radial-gradient(circle at 88% 18%, rgba(242, 206, 155, .28), transparent 24rem),
    var(--access-paper);
}

.wb-page {
  max-width: 72rem !important;
  padding: clamp(1.25rem, 4vw, 4rem) clamp(1rem, 4vw, 2.5rem) !important;
}

.wb-page > h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.wb-nav {
  align-items: center;
  border-bottom-color: rgba(23, 51, 45, .14) !important;
  margin-bottom: clamp(2rem, 5vw, 4.5rem) !important;
}

.wb-nav::before {
  content: "strangerfeed";
  color: var(--access-ink);
  font: 750 1.05rem/1 ui-serif, Georgia, serif;
  letter-spacing: -.02em;
  margin-right: auto;
}

.wb-view--surface {
  border-color: rgba(23, 51, 45, .12) !important;
  border-radius: 1.5rem !important;
  box-shadow: 0 1.5rem 4rem rgba(23, 51, 45, .08);
}

.wb-view--muted {
  border-color: transparent !important;
  background: var(--access-mint) !important;
  border-radius: 1rem !important;
}

.wb-heading {
  color: var(--access-ink);
  font-family: ui-serif, Georgia, serif;
  font-size: clamp(1.4rem, 4vw, 2.1rem);
  letter-spacing: -.035em;
}

[data-node-id$="-title"].wb-heading,
[data-node-id$="-heading"].wb-heading {
  max-width: 17ch;
  font-size: clamp(2.1rem, 7vw, 4.8rem);
  line-height: .98;
}

.wb-text {
  max-width: 62ch;
  font-size: 1.03rem;
}

.wb-button {
  min-height: 3rem !important;
  padding-inline: 1.15rem !important;
  border-radius: 999px !important;
  background: var(--access-moss) !important;
  border-color: var(--access-moss) !important;
}

.wb-button--ghost {
  color: var(--access-ink) !important;
  background: transparent !important;
  border-color: rgba(23, 51, 45, .24) !important;
}

.wb-field input,
.wb-field select {
  width: 100%;
  min-height: 3rem;
  border-radius: .75rem !important;
  background: white !important;
}

.wb-meta {
  color: #52645f !important;
}

.wb-toast {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 10;
  max-width: min(28rem, calc(100vw - 2rem));
  padding: .9rem 1rem;
  color: white;
  background: var(--access-ink);
  border-radius: .85rem;
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, .2);
}

.wb-toast[data-tone="error"] {
  background: #862f2f;
}

[aria-busy="true"] {
  cursor: progress;
  opacity: .68;
}

@media (max-width: 42rem) {
  .wb-nav .wb-link {
    font-size: .82rem;
  }
  .wb-stack {
    flex-wrap: wrap;
  }
}