.sandbox-ui-user-guide {
  --sandbox-user-guide-accent: color-mix(in srgb, var(--sandbox-warning) 84%, #b45309);
  --sandbox-user-guide-tint: #fff1c2;
  --sandbox-user-guide-bg: color-mix(in srgb, var(--sandbox-surface) 62%, var(--sandbox-user-guide-tint));
  --sandbox-user-guide-border: color-mix(in srgb, var(--sandbox-user-guide-accent) 42%, var(--sandbox-border));
  --sandbox-user-guide-text: color-mix(in srgb, var(--sandbox-text) 88%, #4a2200);
  --sandbox-user-guide-muted: color-mix(in srgb, var(--sandbox-user-guide-text) 74%, var(--sandbox-muted));
  position: relative;
  padding: 0.9rem 1rem;
  border: 1px solid var(--sandbox-user-guide-border);
  border-radius: 0.9rem;
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--sandbox-user-guide-tint) 68%, transparent) 0%,
      color-mix(in srgb, var(--sandbox-user-guide-accent) 18%, transparent) 42%,
      transparent 100%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--sandbox-user-guide-bg) 96%, var(--sandbox-surface)) 0%,
      color-mix(in srgb, var(--sandbox-user-guide-bg) 84%, var(--sandbox-ruler-bg)) 100%
    );
  color: var(--sandbox-user-guide-text);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff9df 52%, transparent),
    0 10px 24px color-mix(in srgb, var(--sandbox-user-guide-accent) 10%, transparent);
  overflow: hidden;
}

.sandbox-ui-user-guide--neutral {
  --sandbox-user-guide-accent: color-mix(in srgb, var(--sandbox-border) 54%, var(--sandbox-text));
  --sandbox-user-guide-tint: color-mix(in srgb, var(--sandbox-ruler-bg) 88%, var(--sandbox-surface));
}

.sandbox-ui-user-guide--info {
  --sandbox-user-guide-accent: color-mix(in srgb, var(--bs-info) 82%, #0c4a6e);
  --sandbox-user-guide-tint: #dff6ff;
}

.sandbox-ui-user-guide--success {
  --sandbox-user-guide-accent: color-mix(in srgb, var(--bs-success) 82%, #166534);
  --sandbox-user-guide-tint: #dcfce7;
}

.sandbox-ui-user-guide--warning {
  --sandbox-user-guide-accent: color-mix(in srgb, var(--bs-warning) 84%, #b45309);
  --sandbox-user-guide-tint: #fff1c2;
}

.sandbox-ui-user-guide--danger {
  --sandbox-user-guide-accent: color-mix(in srgb, var(--bs-danger) 82%, #7f1d1d);
  --sandbox-user-guide-tint: #ffe2dd;
}

.sandbox-ui-user-guide--feature {
  --sandbox-user-guide-accent: color-mix(in srgb, var(--sandbox-accent) 82%, #0f766e);
  --sandbox-user-guide-tint: #dbf2ff;
}

.sandbox-ui-user-guide::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, #ffcf5a 92%, var(--sandbox-user-guide-accent)) 0%,
    color-mix(in srgb, #f59e0b 88%, var(--sandbox-user-guide-accent)) 100%
  );
}

.sandbox-ui-user-guide__title {
  position: relative;
  padding-left: 0.15rem;
  font-size: 0.94rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--sandbox-user-guide-text);
}

.sandbox-ui-user-guide__body {
  position: relative;
  padding-left: 0.15rem;
  font-size: 0.835rem;
  line-height: 1.45;
  color: var(--sandbox-user-guide-muted);
}

.sandbox-ui-user-guide .btn-outline-warning {
  --bs-btn-color: var(--sandbox-user-guide-accent);
  --bs-btn-border-color: color-mix(in srgb, var(--sandbox-user-guide-accent) 36%, var(--sandbox-border));
  --bs-btn-hover-color: color-mix(in srgb, var(--sandbox-surface) 94%, white);
  --bs-btn-hover-bg: var(--sandbox-user-guide-accent);
  --bs-btn-hover-border-color: var(--sandbox-user-guide-accent);
  --bs-btn-active-color: var(--bs-btn-hover-color);
  --bs-btn-active-bg: color-mix(in srgb, var(--sandbox-user-guide-accent) 88%, black);
  --bs-btn-active-border-color: color-mix(in srgb, var(--sandbox-user-guide-accent) 88%, black);
}

html[data-sandbox-theme="dark"] .sandbox-ui-user-guide {
  --sandbox-user-guide-bg: color-mix(in srgb, var(--sandbox-surface) 80%, color-mix(in srgb, var(--sandbox-user-guide-tint) 22%, #000));
  --sandbox-user-guide-border: color-mix(in srgb, var(--sandbox-user-guide-accent) 34%, var(--sandbox-border));
  --sandbox-user-guide-text: color-mix(in srgb, #fff1c7 70%, var(--sandbox-text));
  --sandbox-user-guide-muted: color-mix(in srgb, var(--sandbox-user-guide-text) 72%, var(--sandbox-muted));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #ffe4a3 16%, transparent),
    0 14px 28px color-mix(in srgb, #000000 32%, transparent);
}