:root { color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #181b20;
  --paper-2: #20242a;
  --sheet: #23272e;
  --ink: #eef0f3;
  --ink-2: #bdc5cf;
  --ink-3: #a1abb7;
  --rule: #454d58;
  --rule-soft: #39414b;
  --cyan: #68cfdf;
  --safe: #ff7657;
  --safe-deep: #ff947b;
}
.works, .negative, .caps, .canvas, .cta, .footer { background: var(--paper); color: var(--ink); }
.negative::after { display: none; }
.negative .section-title { color: var(--ink); }
.negative .eyebrow-invert, .negative-lead { color: var(--ink-2); }
.negative .btn-invert-ghost { color: var(--ink); border-color: var(--rule); }
.negative .btn-invert-ghost:hover { border-color: var(--ink); }
.negative-code { background: var(--sheet); border-color: var(--rule); }
.code-head, .code-foot { color: var(--ink-2); border-color: var(--rule); }
.code-title, .code-body { color: var(--ink); }
.c-str { color: var(--cyan); }
.c-key, .code-lang { color: #b52c10; }
[data-theme="dark"] .c-key, [data-theme="dark"] .code-lang { color: var(--safe); }
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .account-avatar { background: #e4e7ea; color: #14171b; }
[data-theme="dark"] .btn-primary:hover { background: #fff; color: #14171b; }
[data-theme="dark"] .btn-safe { color: #14171b; }
.cap-card-link { background: #14171b; color: #fff; }
.cap-card-link p { color: #bfc5ce; }
[data-theme="dark"] .material-dialog { color-scheme: dark; }
[data-theme="dark"] .material-dialog-actions #material-use { background: #e4e7ea; color: #14171b !important; }
.theme-toggle {
  width: 40px; height: 40px; flex: 0 0 40px; margin-right: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: 1px solid var(--rule); border-radius: 6px;
  background: var(--sheet); color: var(--ink); cursor: pointer;
}
.theme-toggle:hover { border-color: var(--ink); }
.theme-toggle img { width: 20px; height: 20px; }
.theme-toggle .theme-sun { display: none; }
[data-theme="dark"] .theme-toggle .theme-moon { display: none; }
[data-theme="dark"] .theme-toggle .theme-sun { display: block; filter: invert(1); }
@media (max-width: 620px) {
  .theme-toggle { width: 36px; height: 36px; flex-basis: 36px; margin-right: 8px; }
}