html[data-archdesign-dev] {
  --ink: var(--arch-ink);
  --ink-soft: var(--arch-muted);
  --paper: var(--arch-bg);
  --white: var(--arch-surface);
  --line: var(--arch-line);
  --sage: var(--arch-success);
  --sage-pale: color-mix(in srgb, var(--arch-success) 14%, var(--arch-surface));
  --terra: var(--arch-ink-soft);
  --terra-pale: color-mix(in srgb, var(--arch-danger) 14%, var(--arch-surface));
  --gold: var(--arch-warning);
  --serif: var(--arch-serif);
  --sans: var(--arch-sans);
}

html[data-archdesign-dev] .crawler-shell {
  width: min(1320px, 100%);
  padding: clamp(32px, 5vw, 68px) clamp(18px, 3vw, 34px) 100px;
}

html[data-archdesign-dev] .crawler-header {
  padding: 0 0 clamp(42px, 6vw, 70px);
  border-color: var(--arch-line);
}

html[data-archdesign-dev] .crawler-header h1 {
  max-width: 960px;
  color: var(--arch-ink);
  font-family: var(--arch-serif);
  font-size: clamp(3.4rem, 6vw, 6.7rem);
  font-weight: 400;
}

html[data-archdesign-dev] .crawler-header h1 em {
  color: inherit;
  font-style: normal;
}

html[data-archdesign-dev] :is(.eyebrow, .section-heading p) {
  color: var(--arch-muted);
  font-weight: 500;
}

html[data-archdesign-dev] .crawler-header > p:last-child {
  color: var(--arch-muted);
  font-size: 0.96rem;
}

html[data-archdesign-dev] .crawler-section {
  border-color: var(--arch-line);
}

html[data-archdesign-dev] .section-heading > span {
  border: 1px solid var(--arch-line);
  background: transparent;
  color: var(--arch-faint);
  font-weight: 500;
}

html[data-archdesign-dev] .section-heading h2,
html[data-archdesign-dev] .result-card h3 {
  color: var(--arch-ink);
  font-family: var(--arch-serif);
  font-weight: 400;
}

html[data-archdesign-dev] :is(.provider-card, .url-field, .image-field, .crawler-status, .result-card) {
  border-color: var(--arch-line);
  border-radius: var(--arch-radius-lg);
  background: var(--arch-surface);
  color: var(--arch-ink);
  box-shadow: none;
}

html[data-archdesign-dev] .provider-card:has(input:checked) {
  border-color: var(--arch-line-strong);
  box-shadow: inset 0 0 0 1px var(--arch-line-strong);
}

html[data-archdesign-dev] .provider-mark {
  border: 1px solid var(--arch-line);
  background: var(--arch-bg);
  color: var(--arch-muted);
}

html[data-archdesign-dev] .provider-card code {
  color: var(--arch-ink-soft);
}

html[data-archdesign-dev] .url-field input {
  border-color: var(--arch-line-strong);
  color: var(--arch-ink);
}

html[data-archdesign-dev] .image-actions button {
  border-color: var(--arch-line);
  background: transparent;
  color: var(--arch-muted);
  font-weight: 500;
}

html[data-archdesign-dev] .run-button {
  border-radius: var(--arch-radius-md);
  background: var(--arch-accent);
  color: var(--arch-accent-ink);
  font-weight: 500;
}

html[data-archdesign-dev] .fact {
  background: var(--arch-bg-elevated);
}