/* Original application captures keep their own colors in either website theme. */
.screenshot-theme-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  width: 100%; min-width: 0; margin: 0 0 14px; color: var(--ink);
  font-family: var(--font-body); text-transform: none; letter-spacing: normal;
}
.screenshot-theme-toolbar[hidden], .screenshot-theme-toolbar [hidden] { display: none !important; }
.screenshot-theme-label { margin-right: auto; color: var(--ink-soft); font-size: .75rem; line-height: 1.5; }
.screenshot-theme-buttons { display: inline-flex; flex-shrink: 0; padding: 3px; gap: 3px; border: 1px solid var(--line); border-radius: 9px; background: var(--mint); }
.screenshot-theme-toolbar button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 38px;
  padding: 7px 13px; border: 1px solid transparent; border-radius: 6px; cursor: pointer;
  color: var(--ink-soft); background: transparent; font: 600 .77rem/1.4 var(--font-body);
  text-transform: none; letter-spacing: normal; white-space: nowrap;
}
.screenshot-theme-buttons button[aria-pressed="true"] { color: #10251a; background: var(--green-bright); border-color: var(--green-bright); }
.screenshot-theme-buttons button:hover { color: var(--ink); border-color: var(--line); }
.screenshot-theme-buttons button[aria-pressed="true"]:hover { color: #10251a; border-color: var(--green-text); }
.screenshot-theme-toolbar .screenshot-theme-reset { padding-inline: 2px; color: var(--green-text); text-decoration: underline; text-underline-offset: 4px; font-size: .73rem; }
.screenshot-theme-toolbar button:focus-visible { outline: 2px solid var(--green-text); outline-offset: 3px; }
.screenshot-theme-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.screenshot-theme-status.is-error { position: static; width: auto; height: auto; clip-path: none; white-space: normal; flex: 0 0 100%; color: var(--ink-soft); font-size: .73rem; line-height: 1.6; }
.screenshot-theme-toolbar[aria-busy="true"] .screenshot-theme-label { opacity: .65; }
.screenshot-theme-toolbar-external { margin-top: 0; margin-bottom: 14px; justify-content: flex-end; }
.project-card > .screenshot-theme-toolbar { position: relative; z-index: 1; }
[data-screenshot-active-theme="dark"] :is(.screenshot-frame,.project-hero-stage,.project-gallery-frame) { background: #111315; }
[data-screenshot-active-theme="light"] :is(.screenshot-frame,.project-hero-stage,.project-gallery-frame) { background: #f1f3f5; }
@media (max-width: 480px) {
  .screenshot-theme-toolbar { gap: 8px 10px; }
  .screenshot-theme-label { flex: 1 1 100%; }
  .screenshot-theme-toolbar button { min-height: 42px; }
  .screenshot-theme-toolbar .screenshot-theme-reset { margin-left: auto; }
}
@media (prefers-reduced-motion: no-preference) {
  .screenshot-theme-toolbar button { transition: color 130ms, background-color 130ms, border-color 130ms; }
}
@media (max-width: 760px) {
  .screenshot-caption > span { display: block; }
  .screenshot-caption > a { display: block; width: fit-content; }
}
@media print { .screenshot-theme-toolbar { display: none !important; } }