:root {
  --vase-teal: #157f79;
  --vase-teal-dark: #0f615d;
  --vase-ink: #182230;
  --vase-soft: #edf7f6;
}

.wy-side-nav-search {
  background: var(--vase-teal-dark);
}

.wy-nav-top {
  background: var(--vase-teal-dark);
}

.wy-side-nav-search > a img.logo,
.wy-side-nav-search .wy-dropdown > a img.logo {
  max-height: 84px;
  width: auto;
}

.wy-menu-vertical header,
.wy-menu-vertical p.caption {
  color: #62d1c8;
}

.rst-content a:not(.headerlink) {
  color: var(--vase-teal-dark);
}

.rst-content code.literal,
.rst-content tt.literal {
  color: #9d2f59;
  overflow-wrap: anywhere;
}

.rst-content .admonition.tip,
.rst-content .admonition.note {
  border-left: 4px solid var(--vase-teal);
}

.rst-content table.docutils td,
.rst-content table.docutils th {
  white-space: normal;
  vertical-align: top;
}

.vase-version-card {
  background: var(--vase-soft);
  border: 1px solid #b9dfdc;
  border-radius: 6px;
  color: var(--vase-ink);
  margin: 1rem 0 1.5rem;
  padding: 0.9rem 1rem;
}

.vase-demo {
  margin: 1.4rem 0 1.8rem;
}

.vase-demo-frame {
  width: 100%;
  height: min(var(--vase-demo-height, 520px), 68vh);
  min-height: 320px;
  overflow: hidden;
  border: 1px solid #b8c8c6;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(20, 42, 45, 0.10);
}

.vase-demo-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.vase-demo figcaption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-top: 0.55rem;
  color: #536363;
  font-size: 0.88rem;
}

.vase-demo figcaption a {
  flex: 0 0 auto;
  font-weight: 600;
}

@media screen and (max-width: 700px) {
  .vase-demo-frame {
    height: min(var(--vase-demo-height, 520px), 58vh);
    min-height: 280px;
  }
}

@media screen and (min-width: 1100px) {
  .wy-nav-content {
    max-width: 1040px;
  }
}