.vi-sc {
  position: fixed;
  inset: auto 1rem 1rem;
  z-index: 100000;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .5rem;
  pointer-events: none;
}

.vi-sc__panel,
.vi-sc__preferences {
  pointer-events: auto;
}

.vi-sc[hidden],
.vi-sc [hidden] {
  display: none !important;
}

.vi-sc__panel {
  box-sizing: border-box;
  width: min(100%, 33rem);
  max-height: calc(100vh - 2rem);
  overflow: auto;
  padding: 1rem;
  border: 1px solid #9ca3af;
  border-radius: .5rem;
  background: #fff;
  color: #17212b;
  box-shadow: 0 4px 18px rgb(0 0 0 / 18%);
  font-size: 1rem;
  line-height: 1.45;
}

.vi-sc__panel p {
  margin: .5rem 0 .75rem;
  color: inherit;
}

.vi-sc__panel a {
  color: #164d92;
  text-decoration: underline;
}

.vi-sc__title {
  margin: 0;
  color: inherit;
  font-size: 1.125rem;
}

.vi-sc__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.vi-sc button {
  box-sizing: border-box;
  display: inline-block;
  min-height: 2.75rem;
  padding: .4rem .8rem;
  border: 1px solid #243547;
  border-radius: .35rem;
  background: #fff;
  color: #17212b;
  font: inherit;
  cursor: pointer;
}

.vi-sc button:focus-visible {
  outline: 3px solid #176ac7;
  outline-offset: 2px;
}

.vi-sc button:disabled {
  opacity: .65;
  cursor: wait;
}

.vi-sc .vi-sc__status {
  color: #a02222;
}