:root {
  --muted: #725b67;
  --download-ink: #73304e;
  --download-bg: #f9e2ed;
  --download-border: #d69ab6;
}
.example-link {
  display: block;
  width: fit-content;
  margin: 6px auto 2px;
  padding: 5px 8px;
  color: var(--accent-dark);
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.example-link[hidden] { display: none; }

/* Line up the controls even when one caption takes an extra line. */
.workspace .two-fields { align-items: end; }
.workspace .two-fields > .field { min-width: 0; }
.workspace .two-fields > .field > :is(input, select) { box-sizing: border-box; }

.workspace :is(.field, .range-field, .check) { color: var(--ink); }
.workspace :is(.hint, .file-toolbar, .dimension-label, .dimension-text) {
  color: var(--muted);
}
.workspace .dimension-text { fill: var(--muted); }
.tabs button { color: var(--muted); }
.tabs button.active { color: var(--accent-dark); background: var(--download-bg); }
.workspace .file-item.active { border-color: var(--accent); background: var(--download-bg); }
.download-action:is(.button, .tool-button) {
  border: 1px solid var(--download-border);
  border-radius: 8px;
  background: var(--download-bg);
  color: var(--download-ink);
  font-weight: 650;
}
.download-action:is(.button, .tool-button):not(:disabled):hover { background: #f3cde0; }
:is(.download-action, .example-link):focus-visible {
  outline: 2px solid var(--accent-dark);
  outline-offset: 2px;
}