.rive-ui-app {
  display: flex;
  justify-content: center;
  min-height: 100vh;
  background-color: var(--rive-ui-color-bg);
  color: var(--rive-ui-color-text);

  --rive-ui-color-bg: #fff;
  --rive-ui-color-border: #d8d8d8;
  --rive-ui-color-text: rgba(0, 0, 0, 0.8);
  --rive-ui-color-content-bg: #fff;
  --rive-ui-color-toolbar-bg: rgba(0, 0, 0, 0.05);
  --rive-ui-color-success: #52c41a;
  --rive-ui-color-success-bg: #f6ffed;
  --rive-ui-color-info: #1677ff;
  --rive-ui-color-info-bg: #e6f4ff;
  --rive-ui-color-warning: #faad14;
  --rive-ui-color-warning-bg: #fffbe6;
  --rive-ui-color-error: #ff4d4f;
  --rive-ui-color-error-bg: #fff2f0;
  --rive-ui-font-size: 1rem;
  --rive-ui-font-family: 'Noto Sans', 'sans-serif';

  --rive-ui-border-radius: 0.5rem;
  --rive-ui-padding-x: 0.5rem;
  --rive-ui-padding-y: 0.25rem;

  --rive-ui-color-code-bg: #f6f8fa;
  --rive-ui-color-code-comment: #6e7781;
  --rive-ui-color-code-keyword: #cf222e;
  --rive-ui-color-code-function: #8250df;
  --rive-ui-color-code-tag: #116329;
  --rive-ui-color-code-string: #0a3069;
  --rive-ui-color-code-constant: #0550ae;
  --rive-ui-color-code-variable: #953800;
  --rive-ui-font-family-code:
    ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;

  --rive-ui-input-height: 2rem;
  --rive-ui-input-height-small: 1.5rem;

  --rive-ui-button-fg: rgba(0, 0, 0, 0.1);
  --rive-ui-color-button-bg-hover: rgba(0, 0, 0, 0.05);
  --rive-ui-color-button-bg-active: rgba(0, 0, 0, 0.1);
}

.rive-ui-app-theme-dark {
  --rive-ui-color-bg: #000;
  --rive-ui-color-border: #222;
  --rive-ui-color-text: rgba(255, 255, 255, 0.8);
  --rive-ui-color-content-bg: #fff;
  --rive-ui-color-toolbar-bg: rgba(255, 255, 255, 0.075);
  --rive-ui-color-button-bg-hover: rgba(255, 255, 255, 0.075);
  --rive-ui-color-button-bg-active: rgba(255, 255, 255, 0.15);
  --rive-ui-color-success: #52c41a;
  --rive-ui-color-success-bg: #f6ffed;
  --rive-ui-color-info: #1677ff;
  --rive-ui-color-info-bg: #e6f4ff;
  --rive-ui-color-warning: #faad14;
  --rive-ui-color-warning-bg: #fffbe6;
  --rive-ui-color-error: #ff4d4f;
  --rive-ui-color-error-bg: #fff2f0;

  --rive-ui-color-code-bg: #161b22;
  --rive-ui-color-code-comment: #8b949e;
  --rive-ui-color-code-keyword: #ff7b72;
  --rive-ui-color-code-function: #d2a8ff;
  --rive-ui-color-code-tag: #7ee787;
  --rive-ui-color-code-string: #a5d6ff;
  --rive-ui-color-code-constant: #79c0ff;
  --rive-ui-color-code-variable: #ffa657;
}

.rive-ui-main {
  padding: 0 2rem;
  flex: 1 1 60rem;
  max-width: 60rem;
}