:root {
  --ink: #18192d;
  --paper: #f5f6fb;
  --cream: #ffffff;
  --coral: #9b36bd;
  --purple: #6d49c9;
  --green: #1f9bc9;
  --blue: #208cdb;
  --line: #d9dbea;
}

.brand-logo {
  display: block;
  width: 255px;
  height: 78px;
  overflow: hidden;
  flex: 0 0 auto;
}

.brand-logo img {
  display: block;
  width: 255px;
  height: 255px;
  transform: translateY(-43px);
}

.nav {
  color: #ffffff;
  background: #18192d;
  box-shadow: 0 0 0 100vmax #18192d;
  clip-path: inset(0 -100vmax);
}

.app-shell > .brand-logo {
  background: #18192d;
  padding: 0 10px;
  width: 275px;
}

.hero-mark {
  display: block;
  width: min(270px, 100%);
  height: auto;
  margin: -28px auto -18px;
}

.code-card {
  background: #18192d;
}

@media (max-width: 800px) {
  .brand-logo { width: 205px; height: 64px; }
  .brand-logo img { width: 205px; height: 205px; transform: translateY(-34px); }
}