/* Site pages on the white canvas: the capsule is a white oval (as the strict line looks in the dark theme):
   the brand with the orange dot sits on a soft inner oval, the main button is dark. */
.capsule.capsule--light {
  background: var(--st-surface); color: var(--st-text);
  box-shadow: 0 0 0 1px var(--st-line-2), 0 1px 2px rgba(16, 12, 10, .05), 0 16px 40px -16px rgba(16, 12, 10, .22);
}
.capsule--light a, .capsule--light button { color: var(--st-text); }
.capsule--light .cap-home { background: var(--st-surface-2); }
.capsule--light .cap-home:hover, .capsule--light .cap-icon:hover { background: var(--st-surface-3); color: var(--st-text); }
.capsule--light .cap-sep, .capsule--light .cap-meta { color: var(--st-text-3); }
.capsule--light .cap-crumb:hover { color: var(--st-accent-text); }
.capsule--light .cap-toc { background: var(--st-surface-2); }
.capsule--light .cap-toc:hover { background: var(--st-surface-3); }
.capsule--light .cap-toc--static, .capsule--light .cap-toc--static:hover { background: transparent; cursor: default; }
.capsule--light .cap-n { color: var(--st-accent); }
.capsule--light .cap-key { box-shadow: inset 0 0 0 1px var(--st-line-2); color: var(--st-text-3); }
.capsule--light .cap-cta { background: var(--st-inverse); color: var(--st-on-inverse); border: 0; cursor: pointer; }
.capsule--light .cap-cta:hover { color: var(--st-on-inverse); opacity: .88; }
.capsule--light .cap-copy { font: 500 13px/1 var(--font-text); white-space: nowrap; }
.capsule--light .is-done { color: var(--st-accent-text) !important; }
.capsule--light .cap-cta.is-done { color: var(--st-on-inverse) !important; opacity: .8; }
button.btn.is-done { border-color: var(--st-accent-line); color: var(--st-accent-text); }