:root {
  --bg: #2f35e0;
  --bg-deep: #2329c4;
  --ink: #f5f6ff;
  --muted: #c9cbff;
  --line: rgba(245, 246, 255, 0.34);
  --night: #0e1050;
  --sun: #ffd84d;
  --pink: #ff8fc7;
  --mint: #5ce1b0;
  --orange: #ff9a4d;
  --bubble: #ffffff;
  --bubble-ink: #14165a;
  --display: "Bricolage Grotesque", system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1e9e;
    --bg-deep: #141784;
    --muted: #b9bcf5;
    --line: rgba(245, 246, 255, 0.26);
    --bubble: #f1f2ff;
  }
}

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

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--display);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

main {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 32px;
  flex: 1;
  display: grid;
  grid-template-columns: 5fr 7fr;
  grid-template-areas:
    "stage stage"
    "thread offer";
  column-gap: 64px;
  row-gap: 28px;
}

/* Presence pill, styled like an "online" status in a chat app */

.top {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 24px 32px 0;
}

.presence {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 12px;
  border-radius: 999px;
  background: var(--bg-deep);
  font-size: 15px;
  font-weight: 500;
}

.presence-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 0 3px rgba(92, 225, 176, 0.25);
}

/* The network */

.stage {
  grid-area: stage;
  position: relative;
  aspect-ratio: 2.9 / 1;
  display: grid;
  place-items: center;
}

.links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.links line {
  stroke: var(--line);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.links .packet { fill: var(--sun); }

.people { position: absolute; inset: 0; }

.avatar {
  position: absolute;
  left: var(--x);
  top: var(--y);
  translate: -50% -50%;
  width: var(--s);
  height: var(--s);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c);
  color: var(--night);
  font-size: calc(var(--s) * 0.32);
  font-weight: 700;
  box-shadow: 0 0 0 4px var(--bg);
  animation: pop 0.55s cubic-bezier(.3, 1.6, .5, 1) var(--d) both;
}

.avatar-more {
  background: var(--bg-deep);
  color: var(--ink);
  border: 1.5px dashed var(--line);
  font-size: calc(var(--s) * 0.28);
}

@keyframes pop {
  from { scale: 0; }
  to   { scale: 1; }
}

.domain {
  position: relative;
  font-size: clamp(60px, 12.4vw, 164px);
  font-weight: 720;
  font-stretch: 88%;
  font-variation-settings: "wdth" 88;
  line-height: 1;
  letter-spacing: -0.025em;
  white-space: nowrap;
}

.domain-word { display: inline-block; }

/* The two dots of the domain are nodes in the network */
.pt {
  display: inline-block;
  width: 0.19em;
  height: 0.19em;
  margin: 0 0.06em 0 0.08em;
  border-radius: 50%;
  background: var(--sun);
  box-shadow: 0 0 0 0.05em var(--bg);
  vertical-align: baseline;
}

/* Group chat */

.thread {
  grid-area: thread;
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  align-self: start;
}

.msg {
  position: relative;
  max-width: 34ch;
  padding: 10px 16px 12px;
  border-radius: 20px 20px 20px 6px;
  background: var(--bubble);
  color: var(--bubble-ink);
  font-size: 16px;
  line-height: 1.4;
  transform-origin: 0 100%;
}

.msg b {
  display: block;
  margin-bottom: 2px;
  font-size: 13px;
  font-weight: 700;
  color: color-mix(in srgb, var(--c) 55%, var(--bubble-ink));
}

.msg-reply {
  align-self: flex-end;
  border-radius: 20px 20px 6px 20px;
  background: var(--sun);
  transform-origin: 100% 100%;
}

.msg-reply b { color: color-mix(in srgb, var(--bubble-ink) 70%, var(--sun)); }

.msg.is-waiting { visibility: hidden; }

.msg.is-typing { color: transparent; width: 72px; height: 44px; overflow: hidden; }
.msg.is-typing b { color: transparent; }
.msg.is-typing::after {
  content: "";
  position: absolute;
  left: 18px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--bubble-ink);
  opacity: 0.5;
  box-shadow: 13px 0 0 var(--bubble-ink), 26px 0 0 var(--bubble-ink);
  animation: typing 0.9s infinite;
}

.msg:not(.is-waiting):not(.is-typing) { animation: arrive 0.35s cubic-bezier(.3, 1.4, .5, 1); }

@keyframes typing {
  50% { opacity: 0.2; }
}

@keyframes arrive {
  from { scale: 0.85; opacity: 0; }
  to   { scale: 1; opacity: 1; }
}

/* Offer */

.offer {
  grid-area: offer;
  display: grid;
  gap: 24px;
  align-content: start;
}

.lede {
  max-width: 42ch;
  font-size: clamp(20px, 1.75vw, 23px);
  text-wrap: balance;
  font-weight: 450;
  line-height: 1.45;
}

.tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 16px;
  font-weight: 500;
}

.action { display: grid; gap: 14px; }

.buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 16px;
}

.cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 26px;
  border-radius: 999px;
  background: var(--sun);
  color: var(--night);
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 6px 0 var(--night);
  transition: translate 0.12s ease, box-shadow 0.12s ease;
}

.cta svg { width: 22px; height: 22px; fill: currentColor; }

.cta:hover { translate: 0 -2px; box-shadow: 0 8px 0 var(--night); }
.cta:active { translate: 0 4px; box-shadow: 0 2px 0 var(--night); }
.cta:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }

/* Marketplace listing, a secondary button next to the WhatsApp CTA */

.listing {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 7px 22px 7px 7px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--bg-deep);
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 6px 0 var(--night);
  transition: translate 0.12s ease, box-shadow 0.12s ease, background 0.15s ease;
}

.listing-icon {
  flex: none;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--mint);
  color: var(--night);
  font-size: 19px;
  font-weight: 800;
}

.listing-body { display: grid; line-height: 1.15; }

.listing-site { font-size: 13px; color: var(--muted); }

.listing-name { font-size: 17px; font-weight: 700; }

.listing-out {
  flex: none;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: translate 0.15s ease;
}

.listing:hover { translate: 0 -2px; box-shadow: 0 8px 0 var(--night); background: color-mix(in srgb, var(--bg-deep) 85%, var(--night)); }
.listing:active { translate: 0 4px; box-shadow: 0 2px 0 var(--night); }
.listing:hover .listing-out { translate: 2px -2px; }
.listing:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

footer {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 28px 32px 20px;
  font-size: 14px;
  color: var(--muted);
}

/* On wide screens, size the network to the window height so the whole offer fits without scrolling */

@media (min-width: 981px) {
  .stage {
    --stage-h: clamp(240px, calc(100svh - 420px), 440px);
    aspect-ratio: auto;
    height: var(--stage-h);
  }
  .domain { font-size: clamp(60px, min(12.4vw, calc(var(--stage-h) * 0.42)), 164px); }
}

/* Narrower screens */

@media (max-width: 980px) {
  main {
    grid-template-columns: 1fr;
    grid-template-areas: "stage" "thread" "offer";
    row-gap: 32px;
  }
  .thread { max-width: 460px; }
}

@media (max-width: 640px) {
  .top { padding: 20px 16px 0; }
  main { padding: 0 16px; row-gap: 28px; }
  footer { padding: 40px 16px 24px; }

  .stage { aspect-ratio: 1 / 0.85; margin-top: 4px; }
  .avatar { left: var(--mx); top: var(--my); width: calc(var(--s) * 0.72); height: calc(var(--s) * 0.72); font-size: calc(var(--s) * 0.24); box-shadow: 0 0 0 3px var(--bg); }
  .domain { font-size: clamp(44px, 18vw, 96px); }

  .offer { gap: 24px; }
  .lede { font-size: 19px; }
  .buttons { flex-direction: column; align-items: stretch; }
  .cta, .listing { justify-content: center; }
  .number { text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .avatar, .msg { animation: none !important; }
  .cta, .listing, .listing-out { transition: none; }
}